HTML5時代のjquery.lazyloadは画像のdata-original属性を使う

jQuery.lazyloadという画像の遅延読み込みライブラリが一時期はやっていましたが、かつてのスクリプトでは最近のブラウザで正しく動いてくれないそうです。

古いブラウザでは、画像のsrc属性を指定した状態で、lazyloadプラグイン側がいったんそれをカラにしてからDOM構築後にリクエストしにいくことで遅延読み込みを実現してたんですが、最近のブラウザではsrc属性が指定されている時点で(DOM構築タイミングで)画像を読みに行くため、lazyloadが無駄になる、というより多重リクエストをかけるため逆にページが重くなる(最悪の場合ね)ことがありました。

ただ、最新版ではそこが改善されています。
具体的には、画像のsrcタグにダミー画像を指定し、data-original属性に本来読み込ませたい画像パスを指定するというもの。これによって、ページ表示直後はダミー画像(1x1pxの白い画像とかでOK)を表示し、順次リクエストをかけて正しい画像を読み込むという処理ができるようになりました。

つまり最新化するためには、ライブラリを読み込むだけではなくて、遅延読み込みさせたい画像のHTMLソースを全部書き換える作業が必要になります。面倒だなあ。

こんな面倒なことやってるサイトあんのかよ、と思ってたら、クーポン共同購入のポンパレが全力でやってました。src画像にはダミーの読み込み中画像(くるくる回るgif)を指定しておいて、「original」属性に本当の画像パスを用意していますね。
ponpare

//HTML側
<img data-original="img/photo.jpg" src="img/grey.gif">
<img class="lazy" src="img/grey.gif" data-original="img/my_great_photo.jpg"  width="640" heigh="480">

//javascript
//画面内の全部の画像を遅延させる場合
<script>$("img").lazyload();</script>

//特定の画像(cssクラスlazyがついたものだけ)を遅延させる場合
<script>$("img.lazy").lazyload();</script>

lazyload公式サイトはこちらライブラリ本体はこれソースはこちら(github)。