素のjavascriptで画像遅延読み込みを実装する方法
画像遅延読み込みするメリット
Google Search Consoleを見てたらある日突然、以下のように改善が必要となってました。
どうやらオフスクリーン画像の遅延読み込みも原因の一つだとか。
いろいろ調べると、いくつかライブラリが出てきますが、今回は素のjavascript で実装する方法を紹介したいと思います。
HTML
2行目 : default.pngという、透明な画像を準備し、 srcに指定しておく。透明なdefault.png なら、サイズを1KBに抑えられる。
3行目 : data属性を設定する。 ここに表示させたい画像のurlを指定する。
<img
src="default.png"
data-src="image.JPG"
/>javascript
1行目 : data属性を持つ画像をすべて取得
3行目 : 取得した画像をfor文で回す。
4行目 : scrollイベント
5行目 : 目標となる画像と画面一番上との距離
6行目 : 画像が画面の下から10%の位置に現れた時の処理
7行目 : srcの値を、data-srcの値に置き換える。
const images = document.querySelectorAll("img[data-src]");
for (let i = 0; i < images.length; i++) {
window.addEventListener("scroll", () => {
const target = images[i].getBoundingClientRect().top;
if (window.innerHeight * 0.9 >= target) {
images[i].setAttribute("src", images[i].getAttribute("data-src"));
}
});
}このように初期設定で透明画像（1KB）が表示され、 画面下端から10%の位置に現れたら、本来の画像を表示させることができました。
参考
まとめ
- default.pngという、透明な画像を準備し、 srcの値に指定しておく。
- data属性を設定し、ここに表示させたい画像のurlを指定
- スクロールイベントで、画像と画面上端からの距離を計算し、 画面に表れたら、srcとdata-srcの値を入れ替える。
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
