0

jQuery Lazy Load pluginを使用しようとしていますが、これは静的 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 としてロードすると機能しません。

4

2 に答える 2

2

遅延読み込みプラグインは、jQuery .height() メソッドを使用して、特定の要素 (この場合は画像) がビューポート内にあるかどうかを、この高さを要素の上部オフセットと比較することで判断します。iframe の高さは 2500px に固定されているため、「ビューポート」 .height() も 2500px になります。これが、すべての画像を一度にロードする理由です。親 DOM の高さは考慮されず、iframe のみが考慮されます。

画像を遅延ロードしたい場合、唯一のオプションは、ユーザーに iframe 内をスクロールさせることです。

于 2013-08-28T21:17:17.697 に答える