Lazy Load Plugin - 可視範囲入ったら画像の読み込みを開始

最近海外のブログなんか見ていると、スクロールしてから画像が表示されるものがよくあります。とりあえず見える部分の画像のみ表示して、スクロールして見えるところにきてから表示しようというものです。大きな画像を使っているサイトなんかでは使えそうです。
方法は以下のサイトで紹介されています。

サンプルコード載せておきます。

スクロールして可視範囲に入ると一旦 white.png を表示してから、本来の画像をフェードインして表示するという感じです。相変わらず説明下手なので ⇒ サンプル
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="jquery.lazyload.glamour.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $("img").lazyload({
        placeholder : "white.png",
        effect : "fadeIn"
    });
  });
</script>

jQueryはせっかくなのでGoogle Libraries APIを使っています。jquery.lazyload.glamour.jsは上記サイトで取得できます。

一旦表示する画像は「Ajaxload - Ajax loading gif generator」なんかでアニメーションgifを作ってみるといいかも。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加