jQuery Lazy在一个iframe中加载图像

我试图使用jQuery Lazy Load plugin，它在我的静态HTML页面上工作正常。但是，当我尝试在具有固定高度的iframe中加载同一页面时，图像不会延迟加载，它们会立即加载。jQuery Lazy在一个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时，它不起作用。

来源

2013-08-28 Marcelo Somers

尝试延迟加载内file.html –

的图像，我会一直更加清晰：懒惰负载内file.html已经发生。当file.html作为另一页上的iframe加载时，它不起作用。 –

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

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

来源

2013-08-28 21:17:17 sjmorrow

尝试添加延迟加载事件iframe的图片太：

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

来源

2013-08-28 22:20:20 Brian

jQuery Lazy在一个iframe中加载图像

回答

相关问题