ネイティブJavaScriptの画像遅延ロードを実現する方法

著者：Eve Cole 更新時間：2025-05-07 17:32:01

この記事では、ネイティブJavaScriptの画像遅延ロードを実現する方法について説明します。遅延画像の読み込みには実際にはjQueryプラグインがあり、読み込み方法は非常にシンプルで合理的です。ただし、一部の友人は、jQueryプラグインパッケージをロードすることは大きすぎると考えているので、私はそれをあなたと共有するために自分で書いています。

まず第一に、画像遅延の読み込みは、特に多くの写真があるサイトでは、帯域幅を節約し、より良いユーザーエクスペリエンスを取得することができます。これは重要です。以下の画像遅延ロードの原則と実装コードについて説明しましょう。

画像遅延ロード原理

画像遅延読み込みの原則は、HTMLの画像SRCが実際の画像アドレスに入力されていないが、画像アドレスは次のようなカスタム属性を持つIMGタグに割り当てられていることです。特定のポイントに到達すると、カスタム属性の画像の実際のアドレスが現在のIMGタグのSRCに割り当てられ、それにより画像の動的表示が実現されます。実際のプロジェクトでは、これらの画像のアドレスをAJAXに渡し、IMGのカスタムプロパティに割り当てることができます。

ネイティブJSは画像の遅延読み込みの例を実装しています：

結局、テキストコンテンツは少し退屈に見えます。簡単なデモを書き、すべてのコードを投稿しました。それを必要とする友人はそれを直接コピーすることができ、それからあなたはコードを見た後に理解するでしょう。

次のようにコードをコピーします：<！doctype html>

<html>

<head>

<title>画像遅延ロード</title>

<style>

IMG {display：block; width：350px; height：245px; background：url（img/loading.gif）センターセンターノーレピート}

</style>

</head>

<body>

</div>

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プログラミングに役立つことを願っています。