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」の使い方についてでした。

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

Macの複合キーを有効Macの複合キーを有効にしてショートカットなどを使いやすくする前のページ

定規にもなるDandeonのマネークリップがお洒落でとても画期的!次のページ

関連記事

  1. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  2. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  3. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  4. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  5. Animated Page Transition
  6. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

コメント

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

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

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP