勉強したことのメモ

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

  関連記事

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

画像をアップロードすると複数サムネイルを生成する方法
画像をアップロードすると複数サムネイルを生成する方法

フォームで画像をアップロードすると、予め定めておいた大中小のサイズでサムネイル画 ...

PHPでjpg / png画像をWebP画像に変換し保存する方法
PHPでjpg / png画像をWebP画像に変換し保存する方法

PHPでjpg / png画像を圧縮したかった。ただjpg / pngのままだと ...

jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

ajaxを使わずに非同期っぽくsubmitする
ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...