jQuery惰性加载iframe中的图像

jQuery Lazy Load Images within an iframe

本文关键字：图像 iframe 加载 jQuery      更新时间：2023-09-26

我正在尝试使用jQuery Lazy-Load插件，它在我的静态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加载到另一个页面上时，它不起作用。

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

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

也尝试将延迟加载事件添加到iframe Images：

$("img.lazy").lazyload();
$( "iframe" ).children( 'img' ).lazyload();
相关文章：