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. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  2. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  4. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  5. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

  6. Simple button radios

    JavaScript

    シンプルで高性能なラジオボタンを実装できる「Simple button radios」

    Simple button radiosはシンプルで高性能なラジオボタ…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP