勉強したことのメモ

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

  関連記事

faviconをサイトURLもしくはpngファイルから生成する方法
faviconをサイトURLもしくはpngファイルから生成する方法

AというサイトのfaviconをBというサイトで使いたかった。ただ、favico ...

MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法
MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法

先日PHPで画像を比較して類似度を算出する「image-comparator」ラ ...

PHPからWebAPI(screendot)経由で他サイトのスクリーンショットを取得する方法
PHPからWebAPI(screendot)経由で他サイトのスクリーンショットを取得する方法

PHPで他サイトのスクリーンショットを取得したい。今回はライブラリは無しで実現し ...

PHPで画像にモザイクをかけて保存
PHPで画像にモザイクをかけて保存

やりたかった事はPHPで ・モザイク処理 ・元の画像とは別にファイル名をつけて保 ...

JavaScriptにて画像をフルスクリーン表示する方法
JavaScriptにて画像をフルスクリーン表示する方法

JavaScriptにて画像をクリックするとフルスクリーン表示させたかった。ただ ...