プレロード非表示のCSS画像

Question

私はjqueryベースのホームページに5つの隠しdivがあり、それぞれにいくつかのバックグラウンドCSS画像が含まれています。

問題は、親レイヤーの可視性が表示されるまでブラウザがcssイメージをDOMにロードしないため、レイヤーが表示されたときに画像がゆっくりと読み込まれることです。私はすでに考えられてきた

ソリューション：

• CSSスプライト（文句を言わない。このために再設計するあまりにも多くの仕事、そして実際に動作divを表示/非表示）
• This jQuery pluginその自動ロードのCSSの背景画像（単に他の多くの人に報告されているように私にとってはうまくいきません）。

• JSを経由して画像をプリロード：

  $(function() { 
  function preloadImg(image) { 
      var img = new Image(); 
      img.src = image; 
  } 
  
  preloadImg('/images/home/search_bg_selected.png'); 
  }); 
  

  このソリューションは、二回DOMに画像をロードしているようだ...かつてのJSロードし、その後、再びそれをロードするdivレイヤが表示されたときに...これは2つのHTTP呼び出しを行い、したがって動作しません。

この問題の解決方法は他にありますか？

Answer 1

あなたは、他の方法では、Javascriptを使用しないものを意味すると言いましたか？

<script language="JavaScript"> 
function preloader() 
{ 
    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]="image1.jpg" 
    images[1]="image2.jpg" 
    images[2]="image3.jpg" 
    images[3]="image4.jpg" 

    // start preloading 
    for(i=0; i<=3; i++) 
    { 
      imageObj.src=images[i]; 
    } 
} 
</script> 

その他なしJSの方法、それは見ていないので、どこかのページにいくつかのHTMLを配置するために、次のとおりです。

<image src="picture.jpg" width="1" height="1" border="0"> 

またはHTML ...

<img src="images/arrow-down.png" class="hiddenPic" /> 

...とCSS。 ..

.hiddenPic { 
    height:1px; 
    width:1px; 
} 

のその他のJavaScriptの方法：

function preload(images) { 
    if (document.images) { 
     var i = 0; 
     var imageArray = new Array(); 
     imageArray = images.split(','); 
     var imageObj = new Image(); 
     for(i=0; i<=imageArray.length-1; i++) { 
      //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images) 
      imageObj.src=images[i]; 
     } 
    } 
} 

その後のようなもの使用して画像を読み込む：「このソリューションは、かつてときのjs ...二回DOMに画像 をロードするように思わ

<script type="text/javascript"> 
preload('image1.jpg,image2.jpg,image3.jpg'); 
</script> 

Answer 2

を がロードされ、divレイヤーがロードされると、 が表示されます.2つのhttp呼び出しが行われるため、 は機能しません。

第2のhttpリクエストは304で応答する必要があります（変更されていない）ので、これは問題ありません。 別のオプションのjQueryを介して画像をロードし、DOMを経由して、背景画像をインラインとして挿入することがある、のような：他のソリューションと同様

jQuery.fn.insertPreload = function(src) { 
    return this.each(function() { 
     var $this = $(this); 
     $(new Image()).load(function(e) { 
      $this.css('backgroundImage','url('+src+')'); 
     }).attr('src',src); 
    }); 
}; 

$('div').insertPreload('[huge image source]'); 

Answer 3

ハードコーディングURLは、コードの保守上の税を課す提案します。これを避け、jQueryを使って一般的な解決策を作るのは比較的簡単です。

この関数は、すべての隠し要素を選択し、背景画像があるかどうかを確認してから隠しダミー要素に読み込みます。

$(':hidden').each(function() { 
    //checks for background-image tab 
    var backgroundImage = $(this).css("background-image"); 
    if (backgroundImage != 'none') { 
    var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
    $('<img/>')[0].src = imgUrl; 
    } 
}); 

Answer 4

CSSプリロードは簡単です。

例：

body:after{ 
    display:none; 
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) 
} 

Answer 5

ブラウザは<link>要素のrel="..."財産のprefetchとpreloadプロパティをサポートし始めています。

アディOsmaniのpost about the preload and prefetch propertiesが優れていると、彼らが使用する必要がある場合について説明します。

プリロードは早いページのために必要な リソース（キースクリプト、ウェブフォント、ヒーロー像を要求するために、ブラウザに命令をフェッチしています）。

プリフェッチは、フェッチされたリソースと 要求がナビゲーションを越えて持続する必要があるユーザ（たとえば、ビューまたはページ間）の今後のナビゲーションです。ページAがページBに必要なクリティカルリソースのプリフェッチ要求を で開始すると、 の重要なリソースとナビゲーション要求は 並列で完了することができます。この使用例で事前ロードを使用した場合、ページAのアンロード時にすぐにキャンセルされるのは です。

要素がそのようにように使用されている：

<link rel="preload" as="image" href="https://your.url.com/yourimage.jpg" /> 

Iは複数のステップでフォームを設計していて、それぞれが異なる背景画像を有しています。このパターンは、Chromeが次の背景イメージをダウンロードする際に、ステップ間の「点滅」を解決します。