image_javascript スキルの遅延読み込みを実装するネイティブ JavaScript メソッド

この記事の例では、ネイティブ JavaScript を使用して画像の遅延読み込みを実装する方法を説明します。画像の遅延読み込みには実際には jquery プラグインがあり、読み込み方法は非常にシンプルで合理的ですが、jquery プラグイン パッケージの読み込みが大きすぎると感じた友人もいたので、Yu Shi が自分で作成して共有しました。 。

まず、画像の遅延読み込みにより帯域幅が節約され、特に画像が多いサイトの場合、これは非常に重要です。

画像の遅延読み込みの原則

画像の遅延読み込みの原理は、HTML 内の画像 src が実際の画像アドレスではなく、画像アドレスがカスタム属性を使用して img タグに割り当てられることです。 src="img/loading.gif ” data-url="img/1.jpg" と入力し、js を使用してブラウザーのスクロール バー イベントを決定します。ある時点に達したら、カスタム属性内の画像の実アドレスを現在の img タグの src に割り当てます。 、それにより動的な画像処理ショーを実現します。実際のプロジェクトでは、これらのイメージのアドレスを ajax 経由で渡し、img のカスタム属性に割り当てることができます。

ネイティブ JS を使用した画像の遅延読み込みの例:

結局のところ、テキストの内容は少し退屈に思えますが、私は簡単なデモを書いたので、必要な友達はそれを直接コピーして、コードを見て理解することができます。

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

<頭>


<スタイル>
    img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}

<スクリプトタイプ="text/javascript">
var obj=document.getElementById("div").getElementsByTagName("img"),
h=window.innerHeight || document.documentElement.clientHeight;
for(var i=0;i     obj[i].url=obj[i].getAttribute("データ URL");
    obj[i].top=obj[i].offsetTop;
    obj[i].flag=true;  // 浏览器の再ダウンロード画像を阻止し、この画像の追加が成功した後、滚動浏览器の再追加画像を承認しません;
}
var fnLoad = function(obj){
    var t = document.body.scrollTop || document.documentElement.scrollTop;
    if(th>obj.top 200&&obj.top>t){ //给个 200 は图片加下状態态を向上让用户視，さらに友好的
       setTimeout(function(){
         obj.src=obj.url;
         obj.flag=false;
       },500)
    }
}
window.onscroll = window.onload=function(){
    for(var i=0;i         if(obj[i].flag){
            fnLoad(obj[i]);
        }
    }
}

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。