勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

   2024/05/22  jQuery

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以下に利用方法をメモ。

 

lazyload

公式サイト

http://www.appelsiini.net/projects/lazyload

CDN

CDNで使う場合は以下を記述する。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$('img').lazyload({
effect : 'fadeIn',
effectspeed : 200
});
$('img').lazyload({ effect : 'fadeIn', effectspeed : 200 });
$('img').lazyload({
    effect : 'fadeIn',
    effectspeed : 200
});

 

参考サイト

http://www.koikikukan.com/archives/2012/11/21-015555.php

 - jQuery

  関連記事

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

S