I'm loading an iframe on the page when a user scrolls down the page and hits 500px but the problem I came across is preventing the content from re-loading. Every time you hit the 500 mark, the content re-loads itself. Can anyone tell me how to load it once?
jQuery(document).scroll(function () {
var y = jQuery(this).scrollTop();
if (y > 500) {
jQuery('#loadme').attr('src', '/my-content.html');} });
How would you handle loading multiple iframe's on the same page using this solution? I tried combining if statements but only the first iframe loads as you scroll down.
Works pretty well but the animations come in too soon. Is there a way to adjust the offset so the loading happens after the page is scrolled beyond the fold?
I get a white flash when the iframe loads - most noticeable in Safari. In the past I've been able to get around this with visibility hidden. Is there a method to prevent the white flash using Intersection Observer that you know of?