画像の遅延読み込み（Lazy Loading）でサイトを快適に！仕組みと実装法を徹底解説

遅延読み込みの実装方法

遅延読み込みは、ウェブページのパフォーマンスを向上させるための効果的な手法です。特に画像や動画の表示において、必要なタイミングでのみ読み込むことで、初期表示が速くなります。以下に具体的な実装方法を紹介します。

遅延読み込みを実装するには、主にJavaScriptを利用します。まず、画像のsrc属性をdata-src属性に置き換えます。これにより、ブラウザはページを読み込む際に画像を読み込まなくなり、代わりにプレースホルダーや何も表示しない状態にすることができます。

次に、画像がビューポートに入った際にdata-srcの値をsrcに設定するロジックを追加します。これには、Intersection Observer APIを用いるのが一般的です。このAPIを使用すると、特定の要素が画面に表示されたかどうかを監視することができます。具体的には、以下のようなコードを使います。

“`javascript
const images = document.querySelectorAll(‘img[data-src]’);

const loadImage = (image) => {
image.src = image.dataset.src;
image.onload = () => image.classList.add(‘loaded’);
};

const options = {
root: null,
rootMargin: ‘0px’,
threshold: 0.1
};

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadImage(entry.target);
observer.unobserve(entry.target);
}
});
}, options);

images.forEach(image => {
observer.observe(image);
});
“`

このようにして、ウェブページが表示されたときに必要な画像だけを効率的に読み込むことができるようになります。これによって、ページの初期読み込みが速くなり、ユーザー体験の向上が期待されます。