js画像の遅延読み込みの実装方法とアイデア_javascriptスキル

おおよその実装方法は次のとおりです。
ページの読み込みがトリガーされる前に、指定された ID を持つ要素内のすべての img を imgs に配置し、すべての画像の src 値を新しく作成された _src 属性に配置します。指定された表示イメージへの src 。
次に、document.body のスクロール イベントがトリガーされると、ループは imgs 内の img 要素の位置がブラウザー表示ボックス内に正確にあるかどうかを計算します。そうであれば、img 要素の _src 属性の値は次のようになります。これで画像が表示されます。
ここでさらに面倒なのは、img の位置を計算し、ページに対する要素の絶対位置を取得する方法です。通常は OffsetLeft と offsetTop が使用されますが、これら 2 つの属性は、要素の offsetParent が指す要素の相対位置です。 offsetParent が指す要素が float に設定されている場合、または絶対位置を使用している場合、絶対位置を取得するには offsetLeft が正しくありません。
ここでは、要素のすべての親要素の offsetTop の合計を使用して、ドキュメントの絶対位置を取得します。

コードをコピー コードは次のとおりです:

// の絶対 X 位置を取得します。ページ上の要素
var getLeft = function(El){
var left = 0;
do{
" );
左に戻る;
トップ = El。 offsetTop; 🎜> ウィンドウのスクロール イベントを設定する場合、IE は document.documentElement を使用しますが、他のブラウザーは document を使用します。
次のステップは、ドキュメントに対するブラウザ表示ウィンドウの現在位置を取得することです。次のコードは、




コピー コード

コードは次のとおりです:

//スクロール バーの位置とブラウザ ウィンドウの表示サイズを読み取ります
var top = isGoo? : document.documentElement.scrollTop,

Google Browse ブラウザは body を通じてスクロールトップを取得する必要がありますが、他のブラウザは documentElement を通じてスクロールトップを取得する必要があります。 最後の反復では、画像の位置を決定し、画像を表示します

コードをコピーします

コードは次のとおりです:

//すべての画像をバッチ処理して、ブラウザの表示領域内にあるかどうかを判断します
for(var i=0; i var _top = getTop(imgs [i]）、_ left = getLeft（imgs [i]）;
> _top＆lt; = Top height &&
_left＆lt; = left width）{
var _src = imgs [i] .getattribute（ '_src');
画像が表示されたら割り当てをキャンセルします
if (imgs[i].src !== _src){

}


はい コードを実行します

コードをコピーします

コードは次のとおりです: