Jquery 如何在onload（“image”）函数中中断$。每次迭代

我有以下代码：

$.each(images, function (intValue, currentElement) {    
    $("#image").on('load', function () {
        if (($("#image").width() < 50) || ($("#image").height() < 50)) {
            // do something
        } else {
            // do something
            return false; // not working !!!
        }    
    }).attr("src", currentElement).hide()
      .each(function () {
            if ($(this).complete) $(this).trigger('load');
      });    
});

$。每个（图像、函数（intValue、currentElement）{
$（“#图像”）。在（'load'，函数（）{
如果（$（“#图像”）.width（）<50）|（$（“#图像”）.height（）<50））{
//做点什么
}否则{
//做点什么
返回false；//不工作！！！
}    
}).attr（“src”，currentElement）.hide（）
.每个（功能）{
if（$（this.complete）$（this.trigger（'load'）；
});    
});

---

我想在else语句中分解每个迭代，因此我添加了

return false

，但它不起作用，我认为这是因为

.on（'load'，function（））..

这就是您正在寻找的吗？。在您的情况下，它不工作的原因是图像加载是一个异步过程，在图像加载触发时，循环将完成，并附带所有加载事件。在每次迭代中

返回false

将不工作，因为还没有加载图像

var图像源=[
'http://placehold.it/10x10',
'http://placehold.it/25x20',
'http://placehold.it/50x50'
];
var loadImg=函数loadImages（图像）{
$（“#图像”）。在（'load'，函数（）{
如果（$（“#图像”）.width（）<50）|（$（“#图像”）.height（）<50））{
调试器；
image.shift（）；
加载图像（图像）；
}否则{
调试器；
$（'#image'）.attr（'src'，images[0]）；
返回false；
}    
}).attr（“src”，图像[0]）。每个（函数（）{
if（$（this.complete）$（this.trigger（'load'）；
});
}
loadImg（图像源）；

这就是您正在寻找的吗？。在您的情况下，它不起作用的原因是图像加载是一个异步过程，在图像加载触发时，循环将完成，并附带所有加载事件。在每次迭代中

返回false

将不起作用，因为还没有加载图像

var图像源=[
'http://placehold.it/10x10',
'http://placehold.it/25x20',
'http://placehold.it/50x50'
];
var loadImg=函数loadImages（图像）{
$（“#图像”）。在（'load'，函数（）{
如果（$（“#图像”）.width（）<50）|（$（“#图像”）.height（）<50））{
调试器；
images.shift（）；
加载图像（图像）；
}否则{
调试器；
$（'#image'）.attr（'src'，images[0]）；
返回false；
}    
}).attr（“src”，图像[0]）。每个（函数（）{
if（$（this.complete）$（this.trigger（'load'）；
});
}
loadImg（图像源）；

var图像源=[
'http://placehold.it/10x10',
'http://placehold.it/25x20',
'http://placehold.it/50x50',
'http://placehold.it/100x500'
];
var$myImage=$（“#myImage”）；
var current=0；//跟踪当前加载的url
$myImage.load（函数（）{
//如果还需要jQuery，请使用$（this）
如果（此宽度<50 | |此高度<50）{
++当前；//更新跟踪器
this.src=imageSources[current]；//加载新项
}
});
$myImage.attr（'src'，imageSources[0]）；

旧答案：

var-imgs=document.querySelectorAll（'img'）；
对于（变量i=0；变量i=2）{
完成=正确；
清除（i）；
}
}
函数移除（i）{
//去掉剩下的图像
var imgLength=imgs.长度；
对于（var j=i；j

var图像源=[
'http://placehold.it/10x10',
'http://placehold.it/25x20',
'http://placehold.it/50x50',
'http://placehold.it/100x500'
];
var$myImage=$（“#myImage”）；
var current=0；//跟踪当前加载的url
$myImage.load（函数（）{
//如果还需要jQuery，请使用$（this）
如果（此宽度<50 | |此高度<50）{
++当前；//更新跟踪器
this.src=imageSources[current]；//加载新项
}
});
$myImage.attr（'src'，imageSources[0]）；

旧答案：

var-imgs=document.querySelectorAll（'img'）；
对于（变量i=0；变量i=2）{
完成=正确；
清除（i）；
}
}
函数移除（i）{
//去掉剩下的图像
var imgLength=imgs.长度；
对于（var j=i；j这听起来像是一个x/y问题。。您试图做的事情没有任何意义。循环将把加载函数附加到每个图像上，然后这些加载函数将运行。它们如何停止已经发生的循环？请尝试
$（document）。在（'load'，'#image'，function（）{
@m59）上，我想循环一个数组“图像"它包含一些图像的绝对url，然后我尝试一个接一个地加载每个图像，当我加载第一个图像时，我测试宽度是否小于50…，如果是，我尝试加载第二个图像…但是如果宽度大于等于50，我想打破循环，我的代码中有什么错误我不明白你怎么看means@medBo这是错误的。循环已完成。是否要停止lo阅读。我将向您演示如何执行此操作，如果正确，我将编辑您的答案以使其适当。如果我正确理解了您的问题，您将尝试检查列表中的第一个图像的宽度是否小于
50
如果是，您要加载其他项目，否则您要取消加载其他图像。我是否正确？这听起来像是一个错误n x/y问题..您试图执行的操作没有任何意义。循环将向每个图像附加加载函数，然后这些加载函数将运行。它们如何停止已经发生的循环？请尝试
$（文档）。在（'load'，'#image'，function（）{
@m59）上，我想循环一个数组“images”它包含一些图像的绝对url，然后我尝试一个接一个地加载每个图像，当我加载第一个图像时，我测试宽度是否小于50…，如果是，我尝试加载第二个图像…但是如果宽度大于等于50，我想打破循环，我的代码中有什么错误我不明白你怎么看means@medBo那是因科
    var imageSources = [
      'http://placehold.it/10x10',
      'http://placehold.it/25x20',
      'http://placehold.it/50x50'
    ];
    var loadImg = function loadImages(images){
        $("#image").on('load', function () {
           if (($("#image").width() < 50) || ($("#image").height() < 50)) {
              debugger;
              images.shift();
              loadImages(images);
           } else {
               debugger;
               $('#image').attr('src', images[0]);
               return false;
           }    
        }).attr("src", images[0]).each(function () {
            if ($(this).complete) $(this).trigger('load');
        });
    }
    loadImg(imageSources);

var imageSources = [
  'http://placehold.it/10x10',
  'http://placehold.it/25x20',
  'http://placehold.it/50x50',
  'http://placehold.it/100x500'
];

var $myImage = $('#myImage');

var current = 0; //tracks which url is currently loaded
$myImage.load(function() {
  //use $(this) if you need jQuery here also
  if (this.width < 50 || this.height < 50) {
    ++current; //update tracker
    this.src = imageSources[current]; //load new item
  }
});

$myImage.attr('src', imageSources[0]);

var imgs = document.querySelectorAll('img');

for (var i=0; i<imgs.length; ++i) {
  addLoadEvents(i);
}

function addLoadEvents(i) {
  imgs[i].addEventListener('load', function(e) {
    myImgFunction(this, i, e);
  });
}

var done = false;
function myImgFunction(elem, i, e) {
  //stop functions from running on items that are to be removed.
  if (done) { return false; }
  //do whatever you want here...use "removeTheRest" for whatever condition the remaining images need to be removed.
  if (i > 2) {
    done = true;
    removeTheRest(i);
  }
}

function removeTheRest(i) {
  //get rid of the rest of the images
  var imgLength = imgs.length;
  for (var j=i; j<imgLength; ++j) {
    console.log(j);
    imgs[j].parentNode.removeChild(imgs[j]);
  }
}