1年ほど前から流行しているのですが、画像の遅延読み込みをすることで、余計な HTTP リクエストを発生させないというサーバにも回線にも優しい「lazyload」という Jquery プラグイン。
■Lazy Load Enabled With FadeIn Effect
http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
たぶん誰でも、このスクロールするにしたがって、ふわりと画像が浮かび上がるように表示されるエフェクトを1回は見たことがあると思います。
この仕組みですが、HTMLソース上でいえば、ソースを読み込んでいって画像を表示するタグである IMG タグ にかかった時に、そこがブラウザの表示領域内かを判断。表示領域外だったら画像のパスが書かれている src 属性を空にすることで「画像が無かった」状態にして、画像が読み込まれないようにしているそうです。
そしてスクロールして表示領域に入ったら元に戻して画像を表示させるというわけですね。
なるほどというか、よく考えられています。「ImageLoader」という元ネタがあったらしいのですが。
ところが、この WEB のパフォーマンスを劇的にアップする「lazyload」、実は遅延表示できていなく意味がないどころか、逆にレスポンスを悪くさせる場合があるとのことです。
これはブラウザの仕様の問題で、img タグを読みにいっている際に、既に画像は読み込まれている状態なのだそうです。
なので、そこで lazyload が属性を空にして表示時に再度リクエストして読み込むというのは、非常に無駄だと。
僕は仕事上ブラウザのキャッシュを OFF にしているのですが、その場合は悲惨で、重複してリクエストが走っているとか。
lazyload の開発者によると、時代の推移でブラウザの仕様が変わり、こういうことになったらしいのですが。
（つまり、昔はちゃんと動いていたらしい）
これって結構大問題じゃないのかな、と思ったら、lazyload 最新版は既に対応。
しかし、タグの書き方が特殊です。
src 属性（画像のパス）にダミー画像を設定し、追加で data-original 属性を書いて、スクロールで表示領域に入った際に、data-original 属性 に記述された画像の方を表示させるという方式。
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
これはナルホド、と思う対応なのだけど、このソースの書き方は正義なのか、というところに自分は微妙。
css ハックよりも微妙。
cssハックを基本使わないでなんとかしてきた自分には、これはいただけない。
というわけで、似たようなことで何か良い方法ないかな、と自分なりに思案中。
世の中、便利になったり難しくなったりと大変ですね。┐(´д｀)┌
コメント