CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Marcelo Somers
Marcelo Somers

Reputation: 209

jQuery Lazy Load Images within an iframe

I'm trying to use the jQuery Lazy Load plugin, which is working fine on my static HTML page. However, when I try to load that same page within an iframe that has a fixed height, the images do not lazy load, they load immediately.

Here is how the iframe is being called:

<iframe src="file.html" frameborder="0" height="2500" scrolling="no" width="100%" onload="resizeFrame()" style="height: 2500px;"></iframe>

I'm not familiar enough with how the DOM sees an iframe, but could it be that the plugin see the iframe height and assumes the image is inside the current viewport?

Is there a simple way to work around this issue? My goal is to have the images within the iframe load as you scroll down the parent page.

Thanks!

Edit: I should clarify that the JavaScript lazyload call is already happening inside file.html and works fine if I load file.html on it's own. It doesn't work when I load file.html as an iframe on another page.

Upvotes: 0

Views: 2418

Answers (2)

Brian
Brian

Reputation: 349

Try to add the lazy load event to iframe Images too:

$("img.lazy").lazyload();
$( "iframe" ).children( 'img' ).lazyload();

Upvotes: 0

sjmorrow
sjmorrow

Reputation: 36

The lazy load plugin is using the jQuery .height() method to determine if a particular element (or image in this case) is inside the viewport or not by comparing this height to the elements top offset. Since your iframe has a fixed height of 2500px, your "viewport" .height() is going to also be 2500px. This is why it is loading all of the images at once. It does not consider the height of your parent DOM, only the iframe.

Your only option is to have the user scroll inside the iframe if you want the images to lazy load.

Upvotes: 2

Related Questions