0

我有一个使用许多图像的 javascript，我想在用户开始点击之前将它们全部加载。图像有点大，所以需要一段时间。这是我的代码：

startTest();

function preloadImages() {
    console.log("preload images");
    for(var i = 1; i <= 132; i++) {
        var img = new Image();
        images[i-1] = "images/"+i+".png";
        img.src = images[i-1];
        if(i == 132) {
            img.load = doneLoading();
        }
    }
}

function doneLoading() {
    console.log("done loading");
    document.getElementById("laading").style.display = "none";
    console.log("loading gone");
    showReady();
}

function startTest() {
    console.log("start test");
    trialCount = 0;
    document.getElementById("laading").style.display = "block";

    preloadImages();
    var hammertime = Hammer(document.body).on("touch", function(event) {
        registerTouch(event);
    });

    startTestTime = +new Date();
    console.log("end start test");
}

如您所见，startTest()首先调用的是预加载图像。这是问题所在：当我在浏览器中加载页面时，javascript控制台指示"done loading"已打印，但是浏览器选项卡上的转轮显示网页仍在加载...

这里发生了什么？加载完所有图像后，如何确定？

4

2 回答 2

3

您需要在每个图像加载时检查该图像是最后一个加载的图像。使用计数变量 ( loaded) 进行检查。

function preloadImages() {

  var loaded = 0;

  for(var i = 0; i <= 132; i++) {

    var img = new Image();

    images.push("images/"+(i+1)+".png");
    img.src = images[i];

    img.onload = function(){

      loaded++;

      if(!(loaded < 132)){

        // all images have loaded
        doneLoading();

      }
    }
  }
}
于 2013-09-23T06:21:49.403 回答
0

为了进行预加载，您必须不断检查complete正在下载的每个图像的状态。由于您无法事先知道下载每个图像需要多长时间（取决于延迟或大小），因此您必须实现一个计时器，该计时器将不断轮询complete每个图像的状态。

这是一种可能的算法：

var timer = null, 
    numImages = 132, 
    allImages = new Array; 

function preLoadImages() { 
    document.getElementById('loadcaption').innerHTML = 'Loading images... '; 
    for (var i = 0; i < numImages; i++) { 
        var tmp = "images/" + i + ".png";
        allImages[i] = new Image(); 
        allImages[i].onLoad = imgOnLoad(tmp); 
        allImages[i].src = tmp; 
    }  
    timer = window.setInterval('checkLoadComplete()', 250); 
}  

function imgOnLoad(imgName) { window.status = 'Loading image... ' + imgName; } 

function checkLoadComplete() { 
    for (var i = 0; i < allImages.length; i++) { 
        if (!allImages[i].complete) { 
            imgOnLoad(allImages[i].src); 
            document.getElementById('loadcaption').innerHTML = 'Loading images... ' + Math.round((i/allImages.length)*100,0) + ' %'; 
            return; 
        } 
    } 
    window.clearInterval(timer); 
    document.getElementById('loadcaption').innerHTML = 'Completed.'; 
    window.status = ''; 
}

哪里loadcaption是一个简单的 HTML 元素来显示进度。（您也可以使用动画 gif 来加载动画）。

这个想法是通过计时器complete调用来不断检查每个图像的状态。checkLoadComplete一旦所有图像都 (load) complete，for循环退出并且计时器被清除。

preLoadImages();您可以通过调用函数来启动预加载过程。

于 2013-09-23T06:49:02.693 回答