勉強したことのメモ

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

  関連記事

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

WordPressのMedia Library Organizerでダイアログ初回表示時のカテゴリを指定する方法
WordPressのMedia Library Organizerでダイアログ初回表示時のカテゴリを指定する方法

Media Library Organizerを使用中のWPサイトで画像をカテゴ ...

PHPで画像アップロード、リサイズ、形式変換(jpg->webp等)はclass.upload.phpが便利
PHPで画像アップロード、リサイズ、形式変換(jpg->webp等)はclass.upload.phpが便利

今までPHPで画像関連の処理を行う場合、リサイズの時のみsmart_resize ...

javascriptやjQueryで画像を書き換えても変わらない場合
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...