在iframe中加载jQuery延迟映像

Question

我正在尝试使用jQuery 惰性负载插件，它在我的静态HTML页面上运行得很好。但是，当我试图在具有固定高度的iframe中加载相同的页面时，图像不会延迟加载，它们会立即加载。

下面是调用iframe的方式：

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

我不太熟悉DOM是如何看待iframe的，但是插件会看到iframe的高度并假设图像在当前的视图中吗？

有什么简单的方法可以解决这个问题吗？我的目标是当您向下滚动父页面时，在iframe加载中获得图像。

谢谢!

编辑：，我应该澄清，JavaScript lazyload调用已经在file.html中发生了，如果我自己加载file.html，它可以正常工作。当我将file.html作为iframe加载到另一个页面时，它不起作用。

Answer 1

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

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

Answer 2

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

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