jQueryで簡単にフワッと画像を表示させる　lazyload.jsの実装方法

よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日社内システムの一部で使うことになったので使い方をメモ。簡単ながら、なかなか使えそうです。

1.下記からLazyLoad.jsをダウンロード

Lazy Load Plugin for jQuery

2.head内に以下を記述

まずjQuery本体を読み込んで、次にlazyload.jsを読み込む。そしてlazyloadセット。
ちなみに下記はオプションでフェードイン効果をつけた例。最も多用しそう。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
  $(function() {
    $("img.lazy").lazyload({
      effect: "fadeIn"
    });
  });
</script>

3.フワッと表示させたい画像のimgタグを記述。

data-originalにはフワッと表示させたい画像を指定。srcには読み込み前に表示させたい画像を指定。

<img class="lazy" data-original="sample.jpg" src="sample.jpg" style="display: inline;">

以上。単純なシステム作成にも少し動きを取り入れるだけで楽しくなりますね。

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) – TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など…

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js – TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ…

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) – TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など…

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

作者: 西畑一馬
出版社/メーカー: アスキー・メディアワークス
発売日: 2010/02/12
メディア: 大型本
購入: 27人クリック: 1,467回
この商品を含むブログ (48件) を見る

jQueryデザインブック　仕事で絶対に使うプロのテクニック

作者: MdN編集部
出版社/メーカー: MdN
発売日: 2011/08/25
メディア: 単行本
購入: 3人クリック: 77回
この商品を含むブログ (3件) を見る

1.下記からLazyLoad.jsをダウンロード

2.head内に以下を記述

3.フワッと表示させたい画像のimgタグを記述。

関連記事