Javascript 在mobile Safari上预装HTML5应用程序的图像？

是否可以为HTML5应用程序（针对移动Safari）预加载一组图像

在理想情况下，应用程序的启动映像会一直持续，直到加载某些映像

我们尝试使用CSS background属性并将每个图像包含为单独的背景，但这无法预加载图像并持久化启动图像

下面是我们用于设置启动映像的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'>

您应该使用HTML显示“启动图像”，并在

$（document）.ready

事件中使用javascript添加其他图像

//编辑

---

拉贾尼的回答为我们应该做什么提供了一个很好的例子。但是，您应该阅读有关

.load（）

事件的警告。

使用下面的代码使用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>

.启动{宽度：100%；高度：100%；位置：固定；z索引：999；显示：无；}
.启动img{宽度：100%；高度：100%；显示：块；}
$（文档）.ready（函数（e）{
//显示启动图像。默认情况下，通过css显示：无。
$（'.start_up'）.show（）；
//加载img
var imgArray=['image 1 path'，'image 2 path'，'image 3 path']；
var total=imgArray.length；
var imgLoaded=0；
用于（imgArray的var i）{
$("

即使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
});

var srcArray=['/path/to/image1.jpg'，'/path/to/image2.jpg']；//您的图像源
函数loadImages（srcArray，回调）{
var load=[]；//此处将包含加载的图像
for（变量i；i

谢谢，我们现在用HTML显示启动图像（用代码更新问题）但是，在加载应用程序所需的所有图像之前，启动图像会隐藏。我们如何在所有图像预加载之前保存图像？谢谢，但是我们如何在所有图像预加载之前保存HTML5启动图像？使用普通html图像，然后用

加载图像

替换图像。谢谢，但是我们如何保存html5在所有映像预加载之前启动映像？