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-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  2. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

  3. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  4. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

コメント

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

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

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP