JavaScript - 等待图片加载完成

Question

var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
l = true;
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
l2 = true;
}

如果只有当l和l2为真时才启动函数，该如何告诉这个javascript呢？我应该设置一个不断检查这两个变量的循环吗？还有更有效的方法吗？我不想让脚本在没有图片的情况下开始，但是使用.onload可以等待加载一个图片而不是全部。感谢您的帮助！

- Saturnix

Answer 1

在我看来，更加优雅的方法：

var loadedImagesCount = 0;
var imageNames = ["b.png", "c.png"];
var imagesArray = [];
for (var i = 0; i < imageNames.length; i++) {
    var image = new Image();
    image.src = imageNames[i];
    image.onload = function(){
        loadedImagesCount++;
        if (loadedImagesCount >= imageNames.length) {
            //loaded all pictures
        }
    }
    imagesArray.push(image);
}

不要纠缠于许多不同的图像变量，只需将图像名称存储在普通数组中，然后循环遍历该数组并计算加载了多少张图片。

- Shadow Wizard Chasing Stars

Answer 2

不需要循环。您可以让它们调用一个函数来检查l和l2是否为true，并执行您想要做的事情。

var onLoaded = function() {
    if (l && l2) {
        // do your stuff
    }
}

imm.onload = function(){
    l = true;
    onLoaded(); // call to onLoaded
}

imm2.onload = function(){
    l2 = true;
    onLoaded(); // call to onLoaded
}

它基本上是观察者模式的简化形式。有一些jQuery插件，例如Radio.js，可以为您封装此功能。

- Spoike

Answer 3

这是一个通用的方案（适用于任意数量的图片）。

function preload( images, callback){
   var imageElements = [],
       counter = images.length,
       lfunc = function(){if (--counter === 0 && callback) callback(imageElements);};

   // first create the images and apply the onload method
   for (var i = 0, len = images.length; i < len; i++){
      var img = new Image();
      imageElements.push( img );
      img.onload = lfunc;
      img.src = images[i];
   }
}

function codeOncePreloadCompletes(preloadedImages){
  // Do whatever you want here
  // images are preloaded
  // you have access to the preloaded image if you need them
  // with the preloadedImages argument
}

// USAGE

preload( ['b.png', 'c.png'], codeOncePreloadCompletes);

// OR

preload( ['b.png', 'c.png'], function(preloadImages){
   // write directly here what to do after preload
});

- Gabriele Petrioli

---

高人们想法相似！不过回调函数的技巧真是妙极了。 :) - Shadow The Spring Wizard

Answer 4

如果您想按顺序加载给定URL列表中的图像，则我认为以下内容很有用：

preloadImages_helper("firstURL", "secondURL");

    function preloadImages_helper(){
        var args =  Array.prototype.slice.call(arguments);
        if(!(args === undefined) && args.length > 0){
            var img = new Image();
            img.src = arguments[0];
            img.onload = function(){
                preloadedImages.push(img);
                console.log("pushing image");
                //Don't forget to call user code!
                if(!(args === undefined) && args.length > 1){
                    args.shift();
                    preloadImages_helper.apply(this, args);
                }
                else{
                    console.log("finished loading images");
                    userCode();
                }
            };
        }
    }

- alistair

Answer 5

如果这是你整个脚本中唯一设置 l 和 l2 的两个时刻，那么你可以在设置值后进行检查。

var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
  l = true;
  if (l && l2) {
    myFunc();
  }
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
  l2 = true;
  if (l && l2) {
    myFunc();
  }
}

function myFunc(){
  //do stuff
}

- Curtis

---

今晚我学到了教训：在iPad上，基于复制/粘贴的快速回答通常不成功。 - JKing

Answer 6

你不需要不停地检查，只需在每次一个完成时检查另一个，这样当第二个完成时，你的函数就会触发，而你只需要“检查”一次。 var l = false; var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
l = true;

if (l2)
   call yourFunction();

}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
l2 = true;

if (l)
   call yourFunction();
}

- JKing