勉強したことのメモ

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

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

   2024/05/22  jQuery

画像を遅延ロードさせたい時には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
});

 

参考サイト

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

 - jQuery

  関連記事

PHPにて指定した画像に対して、繰り返し透かし画像処理する方法
PHPにて指定した画像に対して、繰り返し透かし画像処理する方法

画像素材等のサイトで無料版の画像に対して「sample」等の透かし画像処理を行っ ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...

imgタグのsrc属性のURLにPHPでタイムスタンプを付与しキャッシュ対策する方法
imgタグのsrc属性のURLにPHPでタイムスタンプを付与しキャッシュ対策する方法

imgタグで画像を表示する際、画像を書き換えても同じものが表示されるというケース ...

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

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