0

非常に簡単な質問:

display:none の場合、ブラウザに画像やその他のリソースをダウンロードさせないようにすることはできますか?

コンセプトは次のとおりです。画像として多くのスライドを含む講義プレゼンテーションは、すべてデフォルトで display:none に設定され、ビデオが特定の時間インデックスに達すると、display:inline に変更されます。ブラウザは、画像が表示されていなくても、すべての画像を読み込もうとします。これにより、スライド画像の後に読み込まれるビデオまたは要素がハングする可能性があります。

私はこれらのシリーズを持っています：

<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img src="img1_large.JPG" class="lectureSlidesImg" /></a></figure>

編集 - 動作するはずですか?

<img data-src=/path/to/img.png src="">

//js
loadNextImages() {
   document.querySelectorAll("#slidesContainer footer").map(function () {
       this.getElementsByTagName('img').src = this.getElementsByTagName('img').dataset.src;
       delete this.dataset.src;
   });
}
4

2 に答える 2

5

非表示の画像が含まれないようにsrc(または、たとえばソースとして 1 つの透明なピクセル ファイルが含まれるように) html を更新し、表示されるときにを使用data-srcして変更します。src

<img data-src=/path/to/img.png src="">

//js
loadNextImages() {
    document.querySelectorAll("#container img").map(function () {
        this.src = this.dataset.src;
        delete this.dataset.src;
    });
}
于 2013-01-30T07:04:12.600 に答える
0

これが私がやったことです。

HTML

<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img data-src="img1_large.JPG" src="" class="lectureSlidesImg" /></a></figure>

スライドのタイミングを実行する関数に、変数を追加しました。

var imgNames = document.getElementsByClassName('lectureSlidesImg');

次に、このステートメントをコードのセクション（'for'ループ）に追加しました。このステートメントは、ビデオの現在の時刻に応じた正しいタイミングで、display：inlineをFigureタグに適用します。

imgNames[i].src = imgNames[i].getAttribute('data-src');

したがって、問題のFigureタグを表示することに加えて、問題の画像のdata-src値を取得し、それをsrc属性に挿入します。次に、画像が読み込まれます。

data-*カスタム属性の背後には多くの力があります。それらについて学んだことをうれしく思います。

ただし、display：noneは、表示が変更されない限り、コンテンツの読み込みを妨げるべきではないと考える人もいるかもしれません。

于 2013-02-04T23:17:45.753 に答える