TechNote

事務屋のおぼえがき

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 を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNote

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

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

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

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

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

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

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

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

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