Javascript-等待加载图像

如果

l

和

l2

为真，我如何告诉这个javascript启动函数？我应该设置一个不断检查这两个变量的循环吗？有没有更有效的方法？我不希望我的脚本开始时没有图像，而是使用

。onload

我可以等待只加载一个图像，而不是全部图像。谢谢你的帮助

如果在整个脚本中只有这两次设置了

l

和

l2

，则可以在设置值后进行检查

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是否为真，并执行您想要执行的操作：

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
}

---

它基本上是一种更简单的形式。有像jQuery这样的插件可以为您封装它。

您不必经常检查，只要在每次一个插件完成时检查另一个插件，这样，当第二个插件完成时，您的功能就会启动，您只需“检查”一次。 var l=假； var l2=假

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
}

---

在我看来，更优雅的方式是：

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();
}

var loadedImageScont=0；
var imageNames=[“b.png”，“c.png”]；
var-imagesArray=[]；
对于（var i=0；i=imageNames.length）{
//已加载所有图片
}
}
imagesArray.push（图像）；
}

与处理大量不同的图像变量不同，只需将图像名称存储在普通数组中，然后在此循环，并计算加载的图片数量。

这里是一个通用的（适用于任意数量的图像）

函数预加载（图像、回调）{
var imageElements=[]，
计数器=images.length，
lfunc=function（）{if（--counter===0&&callback）回调（imageElements）；}；
//首先创建图像并应用onload方法
对于（变量i=0，len=images.length；i

如果您想从给定的URL列表中按顺序加载图像，那么我发现这很有用：

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

---

今晚我要吸取教训：基于复制/粘贴的快速答疑在iPad上并不经常成功。伟人的想法都是一样的！不过，这是一个巧妙的回调技巧。：）

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

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();
                }
            };
        }
    }