jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法
2024/05/22
画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以下に利用方法をメモ。
lazyload
公式サイト
http://www.appelsiini.net/projects/lazyload
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
ソースコード
$('img').lazyload({
effect : 'fadeIn',
effectspeed : 200
});
参考サイト
関連記事
-
-
ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法
ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...
-
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...