最新版のLazy Loadについて

JavaScript

いつの間にかjQueryのLazy Loadプラグインがバージョンアップされていました。

以前「スクロールするまで画像を読み込まない（はずの）Lazy Loadについて」の記事があり、Lazy Loadの使用を断念しましたが修正されたようです。（記事作成時のバージョンは 1.6.0）


Lazy Loadの公式サイトからダウンロードします。（http://www.appelsiini.net/projects/lazyload）


公式サイトの上部にも書いてありますが、imgタグのsrc属性に代替画像を指定し、data-original属性に表示したい画像を指定します。

<img src="dummy.jpg" data-original="original.jpg" alt="..." />


そして以下をheadタグ内に記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
$(function(){ $("img").lazyload(); });
</script>


Firefoxのプラグイン Live HTTP Headers などで画面を表示すると遅延読み込みが行われていることがわかると思います。
（スクロール後 data-original の画像がロードされるログが表示されます。）


ただしsrcが代替画像のためSEO的にはいまいちかもしれません。