多くの<img>があるとき、CSS「display:none;」か、JavaScript「append」か？

Question

###質問の概要
CSSで「display: none;」した場合、その<img>は読まれているのでしょうか？

###質問の詳細
「お気に入り記事一覧」を表示するとき、そのサムネを「表示ボタン」で表示切替でできるように考えています

何百件ものお気に入りのサムネを表示すると、Lazy Loadを使うとしても読み込みが遅いためです

その機能実装において、以下どちらの方法にしたらいいのか判断ができません

このどちらがいいとか、他にいい方法などがございましたら教えて頂けないでしょうか？

###考えている方法
方法Ａ
1.あらかじめHTMLに<img>を入れておき
2.CSSで「display: none;」しておいて
3.「表示ボタン」クリック時に「display:block;」にする

方法Ｂ
1.あらかじめHTMLに<img>は入れないで
2.srcをデータ属性で持たせておき
3.「表示ボタン」クリック時にJSで<img>を挿入

Answer 1

画像100枚で試したことがあります。
結果は

・「display:none;」の場合
タグが存在しているので画像は読み込まれる。
これを利用した「画像の先読み機能の実装」という手段があります。

・「imgタグが無い場合」
画像へのURLが無い為読み込まれない
でした。

質問者様の要望されている事は
[Lazy Load]ですので「画像の遅延読み込み」ではないかと思います。

<img data-src="image001.png">

<img>タグへの画像URL指定が通常の[src]ではなく[data-src]であることに注意してください。
この状態の<img>タグは画像を読み込んではいません。
スクロール等で画像描写位置に近づいた時

<img data-src="image001.png" src="image001.png">

と書き換えて画像を取得します。
ただこの方式だと画像情報が無い為レイアウトが崩れる可能性があります。

どちらにしても数百枚の読み込みで時間をとられるのなら
CSSやjQuery等でアニメーションを追加して画像読み込みの遅さをカバーするという手法もあります。
(ローディング画面をローディング画面と思わせず演出と認識させる)

あとはメイン表示の時読み込みに時間をかけるか(先読み)
各画像を表示する時に時間をかける(遅延読み込み)かは
試されて選択されるのがよいかと思います。

Comments

[ageo]

ご回答ありがとうございます
スクロール位置に応じて置換する方法はいいですね
採用させていただきます

Answer 2

CSSで「display: none;」した場合、その<img>は読まれているのでしょうか？

それは試せば分かることなので、サポート対象としているブラウザのDevelopper Toolsで検証してください。
下記はGoogle Chromeの場合で、[Network] タブでファイルが読み込まれたかどうかが分かります。

• Chrome DevTools  |  Google Developers

各々のブラウザのDevelopperToolsはGoogle検索で出てきますので、確認して下さい。

「Operaは display: noneしたリソースを読み込まない」など、実装依存のある挙動だったと記憶しています。
サポート対象のブラウザ全てで検証することをお勧めします。

Re: ageo さん

Comments

[ageo]

ご回答ありがとうございます
開発ツールで見れることを知りませんでした
面倒ですがやはり検証は大事ですね…