0

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.

4

2 回答 2

2

延迟加载插件使用 jQuery .height() 方法通过将此高度与元素顶部偏移量进行比较来确定特定元素（或本例中的图像）是否在视口内。由于您的 iframe 的固定高度为 2500 像素，因此您的“视口” .height() 也将是 2500 像素。这就是为什么它一次加载所有图像的原因。它不考虑父 DOM 的高度，只考虑 iframe。

如果您希望图像延迟加载，您唯一的选择是让用户在 iframe 内滚动。

于 2013-08-28T21:17:17.697 回答
0

尝试将延迟加载事件也添加到 iframe 图像中：

$("img.lazy").lazyload();
$( "iframe" ).children( 'img' ).lazyload();
于 2013-08-28T22:20:20.067 回答