jQuery Mobile（iPhone 4のモバイルSafari）でHTML5 Webアプリケーションで非表示の画像を初めて表示すると、黒のちらつきが表示される

Question

iOSデバイス用のWebアプリケーションを作成するためにjQuery Mobileを使用しています。

iPhoneでのテストでは、最初にjQuery（たとえば、show、fadeIn）で表示される隠し画像が、画像が要素に読み込まれる前に黒く表示されることに気付きました。

他のSO投稿のアドバイスに従って、画像を背景画像として要素にロードし、網膜対網膜以外の表示を考慮に入れることができます。

これは、すでに「ui-page」ソリューションを実装しているため、他のSO投稿に記載されているフリッカーの問題とは関係ないと思います。

これは、jQueryが可視の背景画像のみを最初に読み込むためだと思われます。もちろん、要素を画面に表示することでこれをハックすることができますが、より洗練された回避策が存在するかどうかは疑問です。

Answer 1

Imageオブジェクトを作成してsrcを設定することで、CSS背景画像を事前に読み込むことができます。これは、バックグラウンドでリクエストを作成し、キャッシュします（少なくともデスクトップブラウザでは、テストするiPhoneはありません）。 CSSの背景画像だけが表示されるまで、afaikは読み込まれません。

var imageSources = ["/images/1.png", "/images/2.png", "/images/3.png"]; 

jQuery.each(imageSources, 
    function(index, src) { 
    var img = new Image(); 

     img.onload = function(){ 
      if(this.isLoaded) { 
      return; 
      } 
     this.isLoaded = true; 
     jQuery (document).trigger("imageloaded", [this.src]); 
     }; 

    img.src = src; 

     if((img.complete || img.readyState === 4) && !img.isLoaded) { 
     img.onload(); 
     } 

    } 
); 


jQuery(document).bind("imageloaded", 
    function(e, src) { 
    //div with background-image url == src can be displayed 
    } 
); 

編集：いくつかのテストを実行し、それが示されるまで、Googleのクロムは、とにかくそれをロードしながら、Firefoxは、背景画像をロードしませんでした：

[00:13:44.087] document.getElementById("e").style.display = "block"; 
[00:13:44.090] "block" 
[00:13:44.102] GET http://codinghorror.typepad.com/.a/6a0120a85dcdae970b012877702708970c-pi 

CSS編集用

#e{ 
background-image: url('http://codinghorror.typepad.com/.a/6a0120a85dcdae970b012877702708970c-pi'); 
display: none; 
}