jQueryで画像を表示するとページ読み込みは遅くなるのか？

Question

サイトやブログ等に画像を沢山載せるとそれだけページの読み込みが遅くなりますが、jQueryで表示する画像等でも遅くなるのでしょうか？
例えば、下記のサイトで紹介されているものは要素にマウスオーバーすると初めて画像が表示されるようなものです。

リンク

画像が多いサイトやブログに使えるLazy-loadという画像遅延読み込みのプラグインもありますが、リンクで紹介したようなプラグインとの相性が悪いので使用できなかったりします。

Answer 1

そんなことはないと思いますよ。
xxx.jpg をlazy-load してから、
zzz/xxx.jpg のリンクをクリックして画像を表示すると遅くなります。
キャッシュしておいた画像と名前は同じだけどパスが異なるためブラウザは異なる画像と認識して
リンク先の画像を取得しようとするためです。

遅くなる理由はどちらかというと見る側のブラウザキャッシュが原因だったりすることもあります。
A,B,C,D,E ５HPあり、それぞれタブを５つ開いて新規にトップページを表示しようとします。
そのとき、ブラウザキャッシュが５HPすべてをダウンロードしても十分な容量確保されていれば
全ページの読み込みが完了したら、どのタブをクリックして表示しても再読み込みなどが発生せず
快適に閲覧できるのですが、ブラウザのHPのコンテンツを一時的に確保しておく領域（キャッシュ）
が少なく設定されている場合や、そんなとこいじったこともない、なんていうまったくのデフォルト
設定の場合、多くのブラウザは実際に動作する環境のハードディスクなりメモリなりを食いつぶさない
ように適切よりも若干少ない程度のブラウザキャッシュサイズがデフォルトで設定されています。
なので、３HPのダウンロードが完了した時点でブラウザキャッシュエリアがいっぱいになると、
残りの２HP分は延々HPのロードが終わらなかったり、あっちを見るとしばらくするとHPがロード
完了して、閲覧しつつ、その他のタブを見てみるとロード完了していたはずなのに画面が真っ白に
なってまたロードし直している、なんていう状況に出くわします。
ipad のサファリブラウザなどはその現象が顕著であり、個人ブログなどを２つか３つくらい同時に
タブで開くと、すべてのHPがロード完了している状態を確認したにもかかわらず、タブ選択して閲覧
しようとすると再ロードが発生し、結局タブで開かなければよかった状態になります。結構イライラ
しますね。

jquery 自体が巨大なので、javascirpt の解析時間に時間を取られる場合もあります。
スクリプトをプラグイン的な使い方でいっぱいHPに<script /> タグなどで導入している場合は、
HP本体のコンテンツが表示される前にそれらスクリプトの解析・コンパイルが延々行われるので
画面がロード中の真っ白の画面から一向に先に進まない状態になったりします。
ロード完了しても、JavaScript が複雑すぎて、閲覧しているPCの性能限界とかで、逆にスクリプト
の実行がブラウザの快適な動作を妨げる、なんていう状況になることもあります。
IE8-9 あたりのPCで、jquery を多用した画面コンテンツを作成した場合など、jquery を使わない
で同じ画面を実現したときに比べてかなり動きと操作性にばらつきがみられることがありました。

jquery 便利なんですが、自分のサイトでjquery を導入する場合、画像を lightbox でかっこよく
表示したいとか、そもそも目的がある程度決まっています。でも、jquery はあらゆるブラウザで同じ
動作を実現し、一つスクリプトを <script /> タグでロードしてしまえば、あらゆる操作が少ない記述
で簡単に実現できていしまう魔法の箱みたいな作りになっています。要するに、ピンポイントでその機能
だけ欲しいっていう場面には向かないんです。１つの便利な機能を使うために、１０００個の余計な使わ
ない機能が自動的にくっついてくる。これが jquery の欠点ですかね。
自分が実装する場合に記述するコードがわずか３行くらいだとします。
実際には、その３行の中身はものすごい量のコードを実行していてjquery や lightbox プラグインが
その作業を代行してくれているだけなんです。

Comments

[mop]

経験則に基づいた回答とても参考になりました。

Answer 2

ブラウザが画像の存在を認識できるかできないかで変わると思います。

imgタグをJSから挿入する場合は、挿入するまでブラウザは画像の存在を知らないので読み込みません(=ページのロードは早くなります)

しかし、あらかじめhtmlにはimgタグが書いてあり、それをJSから表示、非表示とする場合は画像を読み込んでしまうと思います(=ページのロードは遅くなる)

LazyLoadの場合はimgタグがあってもsrcが空のためブラウザは画像ファイルを読み込みに行けないのではないでしょうか。
LazyLoadがsrcを指定して初めて読み込みに行くことになります。

間違っていたらごめんなさい

追記：

参照先ページですが、ソースを見てみると

		<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

という具合にガッツリと画像のパスが書かれています
この場合は表示は速くなりません。

が、1s.jpgを、より小さいサムネイル画像を参照するようにし、プレビューで大きな画像を参照するようにすれば読み込みは早くなります。

Comments

[mop]

srcの部分の説明など、知らない情報でとても参考になりました。
回答ありがとうございます。