Lazy Load

JavaScript

画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

画像の読み込みを遅らせて表示させることができるjQueryプラグイン「Lazy Load」を使ってみました。たぶん今後使いどころがありそうな感じです。色んなところでよく見かけると思いますが、スクロールをしていくとそれに合わせて画像も表示されていきます。ということで以下、使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたjquery.lazyload.jsをhead内に読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

続いてLazy Loadをセットします。

<script type="text/javascript">
$(function() {
    $("img.lazy").lazyload();
});
</script>

HTMLで遅らせる画像を記述していきます。src属性には読み込み中に表示させたい画像を、data-originalには遅らせて表示させたい画像を指定してあげます。

<img class="lazy" src="loading.gif" data-original="images/img01.jpg" width="500" heigh="309">

ちなみによく見かけるのはフェードインでの表示だったりします。フェードインで表示させたい場合はオプションを指定する必要があります。

<script type="text/javascript">
$(function() {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});
</script>

オプションではこの他にもフェードのスピードを調整できたりクリック時に画像を表示させたりといったこともできます。詳しくは公式サイトをご確認下さい。ということで、スクロールに合わせて画像の読み込みを遅らせて表示させるjQueryプラグイン「Lazy Load」の使い方についてでした。

以下からダウンロードできます。

関連記事

  1. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  2. Jquery modal box plugin
  3. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  4. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  5. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  6. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. フレンチトーストや自家製ソーセージ
  2. ハレイワ スムージー
  3. クローバーで淹れたコーヒー
  4. 雪が降る日本海

アーカイブ

PAGE TOP