jQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法
よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日社内システムの一部で使うことになったので使い方をメモ。簡単ながら、なかなか使えそうです。
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サイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...
jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...
