この記事の例では、ネイティブ 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]);
}
}
}
