Question

很抱歉，我已经看过Stack Overflow上的类似帖子，但找不到我的具体情况。

我正在迭代一堆图像，我想在找到满足我的规格的后立即退出。麻烦的是，我需要使用＆＃39; onload＆＃39;事件来测试。

我不知道如何突破我的内心功能：每个（）循环总是迭代所有项目，即使第二张图片适合账单。这里是jsfiddle：你会看到3个警报，每次迭代一个。 http://jsfiddle.net/q07awnbr/10/

如果有人能指导我，那就太棒了！ THX。

// A bunch of images var arrImages = ["http://i.imgur.com/cKUVXuQ.jpg","http://i.imgur.com/Ei598tR.jpg","http://i.imgur.com/W92PhqU.jpg"]; // Iterate until I find the first one meeting my specs $.each(arrImages, function(i,item) { extension = item.slice(-(3)).toLowerCase(); if (extension == "jpg") { // Test image size newImg = new Image(); newImg.onload = function() { if (this.width > 600 && this.height > 900) { // All right! That's the one. Set it as src on my web page $("#MyImgBg").attr("src",this.src); return false; // trying to break out - not working } }; newImg.src = item; } // I expected this alert to popup only twice alert(i); });

Answer 1

以下一次加载一个图像并检查它是否是正确的大小，如果不加载下一个图像。一旦加载了正确的图像，它就会停止。

// A bunch of images
var arrImages = ["http://i.imgur.com/cKUVXuQ.jpg","http://i.imgur.com/Ei598tR.jpg","http://i.imgur.com/W92PhqU.jpg"];

// Loads image with index i
var loadImage = function(i){
   extension = arrImages[i].slice(-(3)).toLowerCase();
   if (extension == "jpg"){
      // Test image size
      var newImg = new Image();
      newImg.src = arrImages[i];
      newImg.onload = function(){
         if (this.width > 600 && this.height > 900){
            // All right! That's the one. Set it as src on my web page
            $("#MyImgBg").attr("src",this.src);
         }else{
            if(i < arrImages.length){
               // This is not the one, load next one.
               loadImage(i+1);
            }
         }
      }
   }else{
      if(i < arrImages.length){
         // Wrong file extension, try next one.
         loadImage(i+1);
      }
   }
   alert(i);
}
loadImage(0); // Start with first image

Answer 2

onload处理程序是异步的，因此它在.each()循环结束后运行。因此，您无法从.each()处理程序中停止onload。

如果您想一次加载一个图像，只加载下一个图像，如果前一个图像不符合您的标准，那么您将需要一个完全不同的代码结构。您将无法按照自己的方式使用$.each()。相反，您必须从前一个onload处理程序中开始加载下一个图像（从而序列化异步图像加载）。

如何退出$ .each（）块中嵌入的函数？

2 个答案: