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」、実は遅延表示できていなく意味がないどころか、逆にレスポンスを悪くさせる場合があるとのことです。
■Lazy Load Enabled With FadeIn Effect
http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
たぶん誰でも、このスクロールするにしたがって、ふわりと画像が浮かび上がるように表示されるエフェクトを1回は見たことがあると思います。
この仕組みですが、HTMLソース上でいえば、ソースを読み込んでいって画像を表示するタグである IMG タグ にかかった時に、そこがブラウザの表示領域内かを判断。表示領域外だったら画像のパスが書かれている src 属性を空にすることで「画像が無かった」状態にして、画像が読み込まれないようにしているそうです。
そしてスクロールして表示領域に入ったら元に戻して画像を表示させるというわけですね。
なるほどというか、よく考えられています。「ImageLoader」という元ネタがあったらしいのですが。
ところが、この WEB のパフォーマンスを劇的にアップする「lazyload」、実は遅延表示できていなく意味がないどころか、逆にレスポンスを悪くさせる場合があるとのことです。