Lazyload 問題、今の時代の画像遅延表示

2012年06月28日 22:42

  • LINEで送る
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ハックを基本使わないでなんとかしてきた自分には、これはいただけない。

というわけで、似たようなことで何か良い方法ないかな、と自分なりに思案中。
世の中、便利になったり難しくなったりと大変ですね。┐(´д`)┌


同じカテゴリー(技術的メモ)の記事

このブログの新着情報を配信中!

RSSリーダーに登録することで、新着情報だけを確認することができ便利です。
上のアイコンをクリックしてご登録ください。

見るだけでは飽き足らない、あなた。あなたも小言に参加してみませんか。コメントトラックバック、ご自由にどうぞ。


入力した内容は表示されます
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
過去記事
デザイン特集
グルメ特集
アクセスカウンタ
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 32人
QRコード
QRCODE
プロフィール
yasukawa
yasukawa
浜松在住クリエイター&デザイナーが仕事のことについて頑張って書いてみる。
【認知心理学、コミュニケーションデザイン、情報デザイン、UI/UX、インフォメーションアーキテクト、サイネージ(Scala)、3Dモデリング、データベースアプリ構築(FlileMaker)、Flash Script 2.0&3.0、サーバ構築(Linux)、IoTセンサー&電子工作(Arduino)
文部科学省後援情報検定 情報デザイン試験合格
日本商工会議所販売士検定試験2級合格
日本英語検定協会実用英語検定試験3級合格
デザインカレッジ 外部講師(WEBマーケティング)
日本最大級レビューメディア「zigsow」2021年ベストレビュワー、2022年ベストレビュー