Question

我有一个使用很多图片的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"，但浏览器选项卡上的spinny轮显示网页仍在加载...

这里发生了什么？一旦我的所有图像都完成加载，我怎么能弄清楚？

Answer 1

您需要检查每个图像加载图像是最后一个要加载的图像。使用计数变量（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();

      }
    }
  }
}

Answer 2

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

这是一种可能的算法：

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状态。一旦所有图像都是（加载）complete，则for循环退出并清除计时器。

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

Javascript - 加载图片

2 个答案: