この記事では、ネイティブJavaScriptの画像遅延ロードを実現する方法について説明します。遅延画像の読み込みには実際にはjQueryプラグインがあり、読み込み方法は非常にシンプルで合理的です。ただし、一部の友人は、jQueryプラグインパッケージをロードすることは大きすぎると考えているので、私はそれをあなたと共有するために自分で書いています。
まず第一に、画像遅延の読み込みは、特に多くの写真があるサイトでは、帯域幅を節約し、より良いユーザーエクスペリエンスを取得することができます。これは重要です。以下の画像遅延ロードの原則と実装コードについて説明しましょう。
画像遅延ロード原理
画像遅延読み込みの原則は、HTMLの画像SRCが実際の画像アドレスに入力されていないが、画像アドレスは次のようなカスタム属性を持つIMGタグに割り当てられていることです。特定のポイントに到達すると、カスタム属性の画像の実際のアドレスが現在のIMGタグのSRCに割り当てられ、それにより画像の動的表示が実現されます。実際のプロジェクトでは、これらの画像のアドレスをAJAXに渡し、IMGのカスタムプロパティに割り当てることができます。
ネイティブJSは画像の遅延読み込みの例を実装しています:
結局、テキストコンテンツは少し退屈に見えます。簡単なデモを書き、すべてのコードを投稿しました。それを必要とする友人はそれを直接コピーすることができ、それからあなたはコードを見た後に理解するでしょう。
次のようにコードをコピーします:<!doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title>画像遅延ロード</title>
<style>
IMG {display:block; width:350px; height:245px; background:url(img/loading.gif)センターセンターノーレピート}
</style>
</head>
<body>
<div id = "div">
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
</div>
<script type = "text/javascript">
var obj = document.getElementById( "div")。getelementsbytagname( "img")、
h = window.innerheight || document.documentelement.clientheight;
for(var i = 0; i <obj.length; i ++){
obj [i] .url = obj [i] .getattribute( "data-url");
obj [i] .top = obj [i] .offsettop;
obj [i] .flag = true; //ブラウザが常に画像をロードしないようにするため、画像が正常にロードされた後、ブラウザがスクロールされたときに画像がロードされないようにします。
}
var fnload = function(obj){
var t = document.body.scrolltop || document.documentlement.scrolltop;
if(t+h> obj.top+200 && obj.top> t){//ユーザーの読み込みステータスを改善するために200を与えると、それはよりフレンドリーです
setimeout(function(){
obj.src = obj.url;
obj.flag = false;
}、500)
}
}
window.onscroll = window.onload = function(){
for(var i = 0; i <obj.length; i ++){
if(obj [i] .flag){
fnload(obj [i]);
}
}
}
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。