jquery - 画像が表示: なしに設定されている場合、画像は読み込まれますか?

Question

display プロパティを に設定して画像を非表示noneにしても、ブラウザはその画像ファイルを HTTP リクエスト経由でロードしますか? none画像のリストがあるため、デフォルトの画像である最初の画像を除いて、それらの表示プロパティは に設定されています。ユーザーが次のボタンをクリックしたら、画像 2 を表示し、他の画像の表示プロパティを に設定しますnone。ウェブサイトを高速化するためにこれを求めています。

Answer 1

動作中のjsFiddleデモ

はい、画像が読み込まれました。解決策の 1 つは、次の別の属性を使用していますsrc。

<img data-src="http://placekitten.com/300/300?" />
<img data-src="http://placekitten.com/400/400?" />
<img data-src="http://placekitten.com/500/500?" />

次に、それらの1つを表示したい場合は、src その属性をそのに設定するだけですdata-src:

// showing the second one
var $img = $('img').eq(1);
$img.attr('src', $img.attr('data-src'));

次に、ロードされます。

---

背景画像

動作中のjsFiddleデモ

もう 1 つのソリューションは、タグbackground-imageの代わりに使用しimgています。この場合、タグが表示されるまで読み込まれません。

<div class="div-as-image" style="background-image: url(http://placekitten.com/300/300?);"></div>
<div class="div-as-image" style="background-image: url(http://placekitten.com/400/400?);"></div>
<div class="div-as-image" style="background-image: url(http://placekitten.com/500/500?);"></div>

そしてあなたのCSSで：

.div-as-image {
    width: 500px;
    height: 100px;
    display: none;
}

ここで、そのうちの 1 つを表示すると、その画像が読み込まれます。

// showing the second one
var $div = $('.div-as-image').eq(1);
$div.css('display', 'block');

• background-imageこのメソッドはonnone要素もロードするため、Chrome では機能しません。

Answer 2

はい。画像が読み込まれますが、CSS ルールにより表示されません。

Answer 3

少し遅くなりましたが、Mika Tuupola による jQuery 用の Lazy Load Plugin を使用することをお勧めします(少なくとも、私はそうする予定です)。

画像がウィンドウに表示されるまで画像を読み込まず、画像を表示する表示値が設定されるのを待ちます。言うまでもなく、それは非常に使いやすいです。

ゴッドスピード。

Answer 4

ajax を使用してフォルダから画像をロードし、次に img 要素の jQuery.load() 関数をロードできます。