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
});
参考サイト
関連記事
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
PHPにて「ImageHash」ライブラリを使用し画像の類似度を算出する方法
以前にPHPの「image-comparator」ライブラリで画像の類似度を算出 ...
-
-
JavaScriptにて画像をフルスクリーン表示する方法
JavaScriptにて画像をクリックするとフルスクリーン表示させたかった。ただ ...
-
-
PHPでjpg / png画像をAVIF形式の画像に変換する方法
PHPでjpg / png画像をAVIF形式の画像に変換しサーバに保存したい。W ...
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...