3

これに対する答えはおそらくいいえだと理解しています...しかし、私は尋ねたかったのです。

最初に 1 つの img のダウンロードを開始することは可能ですか?

基本的に、プレースホルダーGIFがあります（ダウンロード時に画像の代わりに表示され、そのGIFをできるだけ早くダウンロードしたいと考えています.

1 つの画像 (GIF) のダウンロードをどうにか高速化できますか?

どうも

4

5 に答える 5

4

他のすべてのタグの前<img>と同じようにgif​​でタグを付けてみて、それを非表示にしますsrc<img>visibility:hidden

于 2012-08-20T00:37:25.877 に答える
2

その画像をデータ URI として含めることができ (大きすぎない場合)、その画像を取得するために別のネットワーク要求が行われることはありません。もちろん、実際に提供される HTML コンテンツのサイズは大きくなります。

新しい画像オブジェクトを作成してsrc属性を設定することにより、JavaScript を使用して画像をプリロードすることもできます。

于 2012-08-20T00:35:40.073 に答える
0

そのgifの前にロードしたくないものすべてを動的にロードしようとすることができます（サイズが多少大きくなります）。次に、その gif をロードし、それが完了したら、残りのコンテンツをロードします。

これは Javascript を使用して行うことができます。これを簡単に行うのに役立つライブラリが既にあるかどうかはわかりませんが、それほど難しくはないはずです。

「document.readyで重要なgifをロードし、それが終了したら残りをロードする」という行に沿って何かを使用することから始めます。

$(document).ready( function() {
    var myImportantImg = $('<img />');
    $(myImportantImg).on('load', function() { 
        // attach myImportantImg somewhere
        // load rest
    });
    $(myImportantImg).attr('src', 'http://url.to/myImg.gif');
});
于 2012-08-20T00:43:38.740 に答える
0

私が読んだことから、css と組み合わせてデータ URI スキームを使用するのが良い選択肢になるでしょう:

img.placeholder {
    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

上記のコードを<style>ドキュメント セクションの -tag に含め<head>て、ページと共に読み込まれることを確認し、適切な画像に -class のタグを付けますplaceholder。

<img src="..." class="placeholder">
于 2012-08-20T00:54:25.490 に答える
-1

たとえば（cssで）プレースホルダーgifを使用できます

img{background-image:url(default_image.png)}

ただし、ある画像を別の画像の前に強制的にロードする良い方法はありません。ブラウザは、好きな順序でロードできます。

プレースホルダーが最初にダウンロードされる可能性を高めることができます。

  • プレースホルダーがすべてのページで同じである場合、キャッシュされる可能性があるため、次のページでは既に読み込まれています

  • プレースホルダー画像がページの早い段階にあることを確認してください (ブラウザーがより早く読み込みを開始するようにします。ブラウザーはおそらく、html に表示される順序で画像を読み込みます)。画像をそこに表示しない場合は、 width="0" または visibility: hidden; のようにします。

  • サーバーが迅速に提供する場所にプレースホルダーを配置します (動的に制御されるフォルダーは避けてください - Apache の public/ フォルダーなどの静的ディレクトリに提供します)。

  • プレースホルダー画像を小さくする

  • イメージの有効期限が遠い将来 (たとえば 1 年) になるようにキャッシュ ヘッダーを設定してキャッシュを奨励し、ブラウザがサーバーに再度確認する必要がないようにします。また、画像のプライベート キャッシュがオフになっていることを確認します (パブリック サーバーのキャッシュを許可します)。

データ URI はそれほど優れたものではありません。ウィキペディアから：

  • データ URI は、含まれているドキュメント (CSS または HTML ファイルなど) とは別にキャッシュされないため、含まれているドキュメントが再ダウンロードされるたびにデータがダウンロードされます。

  • 同じドキュメントから同じリソース (埋め込まれた小さな画像など) を複数回参照すると、埋め込まれたリソースの複数のコピーが作成されます。対照的に、外部リソースは何度でも任意に参照できますが、ダウンロードとデコードは 1 回だけです。

ページの 10 か所でプレースホルダー画像を使用すると、ページがはるかに大きくなります。

于 2012-08-20T00:43:32.407 に答える