スクロールされるまで画像を読み込まない Lazy Load Plugin for jQuery
GIGAZINEでも使われているスクロールされるまで画像を読み込まない Lazy Load Plugin for jQuery についての覚書
元記事:
実際にスクロールするまで画像を読み込ませない「Lazy Load Plugin for jQuery」
http://gigazine.net/index.php?/news/comments/20070911_lazy_load_plugin_for_jquery/
実装方法とソースダウンロード:
http://www.appelsiini.net/projects/lazyload
サンプル:
http://www.appelsiini.net/projects/lazyload/enabled.html
覚書:
HEADERに以下を記載。functionでオプションを設定。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img").lazyload({placeholder : "img/grey.gif"}); }); </script>
GIGAZINEさんの設定はシンプル
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://gigazine.jp/lazyload.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function(){$("img").lazyload({placeholder:"http://gigazine.jp/1x1.gif"});});</script>