jQuery Lazy在iframe中加載圖片

Question

我正在嘗試使用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就可以正常工作。 當我將file.html作為iframe加載到另一個頁面時，它不起作用。

Answer 1

延遲加載插件使用jQuery .height（）方法通過將此高度與元素頂部偏移量進行比較來確定特定元素（或本例中的圖像）是否在視口內。 由於你的iframe的固定高度為2500px，你的“viewport”.height（）也將是2500px。 這就是它一次加載所有圖像的原因。 它不考慮父DOM的高度，只考慮iframe。

如果您希望圖像延遲加載，您唯一的選擇是讓用戶在iframe內滾動。

Answer 2

嘗試將延遲加載事件添加到iframe圖像：

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