【Slick】Slickスライダーで遅延読み込みをしてサイトを軽くする方法
PR ※当サイトではアフィリエイト広告を利用しています
slickスライダーでたくさんの画像を使っているんだけど、サイトが重たい・・・ページを軽くする方法が知りたい・・。
本記事では、Slickスライダーで遅延読み込みをしてサイトを軽くする方法を紹介します。
slickスライダーでたくさんの画像を使っている場合、どうしてもサイトが重たくなってしまうことがあります。そのため、lasyloadを使用してサイトの軽量化をしていきましょう。
Slickスライダーで遅延読み込みをしてサイトを軽くする方法
それでは、早速コードを解説していきます。
HTML
<img data-lazy="xxx.jpg" alt="xxx">
遅延読み込みをさせたい画像をdata-lazyで指定することで、遅延読み込みさせることが可能です。
JavaScript
jQuery('.slider').slick ({
lazyLoad: 'ondemand'
});
lazyLoadオプション
lazyLoadオプションには「ondemand」と「progressive」2つのオプションが用意されています。
ondemand
画像が表示されるタイミングで画像の読み込みが発生
progressive
backgroundで画像を遅延読み込みをしてくれる
【解説】ondemandとは？
「ondemand」オプションを使用すると、画像の読み込みが表示されるタイミングで発生することを意味します。
具体的には、Slickスライダーのスライドが表示される直前になるまで、画像の実際の読み込みは行われません。
通常、ページを読み込むときには、画像も含めてすべてのコンテンツが同時に読み込まれます。
しかし、「ondemand」オプションを使用すると、初期表示時に画像をすべて読み込むのではなく、必要に応じて各スライドの画像を読み込むようになります。
これにより、ページの読み込み速度が向上し、ユーザーがスライドを操作するまで画像の読み込みが遅延されます。ユーザーが次のスライドに移動すると、そのスライドに関連する画像が遅延読み込みされ、表示されるようになります。
「ondemand」オプションを使用することで、初期ロード時間を短縮し、ページのパフォーマンスを向上させることができます。便利ですね〜
progressiveの参考例
「progressive」オプションを使用すると、Slickスライダーが背景画像の遅延読み込みを行います。これにより、画像が表示される前にローディングが行われ、ユーザーにスムーズな体験を提供することができます。
具体的な手順は次のとおり。
- ①：画像要素の
src属性を、遅延読み込みしたい画像のURLではなく、ローディング用のプレースホルダー画像や遅延読み込みを示すダミー画像のURLに設定 - ②：Slickスライダーの設定オプションに
lazyLoad: 'progressive'を追加 - ③：CSSを使用して、ローディング用の要素に背景画像を設定します。
- ④：必要に応じて、ローディング用の要素にスタイルを追加も可能
順番に見ていきます。
①画像要素のsrc属性を、遅延読み込みしたい画像のURLではなく、ローディング用のプレースホルダー画像や遅延読み込みを示すダミー画像のURLに設定
<div class="slick-slide" data-lazy="image.jpg">
<div class="slick-loading"></div>
</div>
②Slickスライダーの設定オプションにlazyLoad: 'progressive'を追加
javascriptCopy code
$('.your-slider').slick({
lazyLoad: 'progressive',
// 他のオプション設定
});
③CSSを使用して、ローディング用の要素に背景画像を設定
cssCopy code
.slick-loading {
background: url(placeholder.jpg) center center no-repeat;
}
④必要に応じて、ローディング用の要素にスタイルを追加も可能
cssCopy code
.slick-loading {
background: url(placeholder.jpg) center center no-repeat;
/* 他のスタイル設定 */
}
これにより、Slickスライダーは背景画像を遅延読み込みし、ローディング用の要素に設定された背景画像が表示されます。
実際の画像が読み込まれた後、背景画像は自動的に置き換えられ、スライドが表示されます。
まとめ
いかがでしょうか？
slickスライダーでたくさんの画像を使っている場合、どうしてもサイトが重たくなってしまうことがあります。そのため、lasyloadを使用してサイトの軽量化をしていきましょう。
他にもJavaScriptの記事を書いているので、ぜひ活用してみてください。
他にも記事を見てみる
- スムーススクロールで別ページに飛んでも特定の位置まで正しくスクロールさせる方法
- 【jQuery/css】シンプルなアコーディオンメニュー【コピペOK】
- JavaScriptでモーダルウィンドウを表示させる方法【サンプル付きで解説】
- 【JavaScript】addEventListenerの種類一覧・使い方を紹介
合わせて読みたい記事
