在移動Safari上預裝HTML5應用程序的圖像？

Question

是否可以爲HTML5應用預先加載一組圖像（針對移動Safari）？

在理想的情況下，應用程序的啓動映像會一直存在，直到某些圖像加載完畢。

我們嘗試使用CSS背景屬性，並將每個圖像作爲單獨背景包含在內，但未能預加載圖像並保留啓動圖像。

這是我們設置的開機畫面HTML，但是這不能繼續下去，直到所有的圖像加載：

<!-- iPhone 3 and 4 Non-Retina --> 
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='/images/x/apple-touch-startup-image-320x460.png'> 

Answer 1

使用下面的代碼來使用jquery預加載圖像。

<style type="text/css"> 
.start_up{width:100%;height:100%;position:fixed;z-index:999;display:none;} 
.start_up img{width:100%;height:100%;display:block;} 
</style> 

<div class="start_up"> <img src="startup-image.png" /></div> 

<script type="text/javascript"> 
$(document).ready(function(e) { 
    //showing startup image. By default it will be display:none via css. 
    $('.start_up').show(); 

    //load img 
    var imgArray = ['image 1 path','image 2 path', 'image 3 path']; 
    var total = imgArray.length; 
    var imgLoaded = 0; 
    for (var i in imgArray) { 
     $("<img />").load(function() { 
      imgLoaded++; 
      if (imgLoaded == total) { 
       //when all images loaded we hide start up image. 
       $('.start_up').hide(); 
      } 
     }).error(function() { 
      imgLoaded++; 
      if (imgLoaded == total) { 
       //when all images loaded even error in img loading, we hide startup image. 
       $('.start_up').hide(); 
      } 
     }).attr("src", imgArray[i]); 
    } 
}); 

</script> 

Answer 2

你應該使用HTML顯示「開機畫面」，並使用JavaScript添加其他圖片在$(document).ready事件中。

//編輯

rajni的回答有一個很好的例子，說明應該做什麼。但是，您應該閱讀關於​​事件的警告on this page。

Answer 3

可以使用Image constructor，甚至預裝圖像時，DOM還沒有準備好：

var srcArray = ['/path/to/image1.jpg', '/path/to/image2.jpg']; // your image sources 

function loadImages(srcArray, callback) { 
    var loaded = []; // here the loaded images will be contained 

    for (var i; i < srcArray.length; i++) { 
    // wrap the loop into a closure because onload is asynchronous 
    (function(src) { 
     // construct a new image 
     var img = new Image(); 

     // use the onload event of the image 
     // you can react to errors or load aborts using 'onerror' or 'onabort' 
     img.onload = function() { 
     loaded.push(img); 

     // call the callback once all images are loaded 
     loaded.length === srcArray.length && callback.call(this, loaded); 
     }; 

     // set the source 
     img.src = src; 
    })(srcArray[i]); 
    } 
} 

// an easy, convenient function to load some images and do something 
// when they are loaded 
loadImages(srcArray, function(images) { 
    // when this function is called, all images are loaded 
    // use them as you please 
});