Jquery each（）在加载（）时运行得更快

我有类似的东西

function loadImages(){
   var num = 1;
   $('.myElement').each(function(){
      var image = $("<img>").attr("src",mySrc).load(function(){
         if(num == 1){
            //do something - does not work
         }
      });       
      num++;
   });
}

条件ifnum==1根本不起作用。我认为，这是因为虽然第一个图像将被加载，但每个函数仍然工作，var num有一些更大的值，因为我在加载函数中的条件将发挥作用。。。我怎样才能修好它

thx

全功能代码

function loadThumbs(imageCount){
var perc = 0;
var cache = [];
var thumbHolderWidth = 0;
var thumbHolderHeight = 0;
$('#thumbs').find(".image_thumb").each(function(enumThumb){
    if(enumThumb == 0){
          $(this).addClass('active');
    }                               
    var thisThumbSrc = $(this).find('img').attr('src');
    var smallim = $("<img>").attr("src",thisThumbSrc).load(function(){
        var thumbWidth = this.width;
        var thumbHeight = this.height;
        thumbHolderWidth = thumbHolderWidth + thumbWidth + 12;
        if(thumbHeight > thumbHolderHeight){
            thumbHolderHeight = thumbHeight;
        }
        });
        cache.push(smallim);

    var imgSrc = $(this).attr('bigimg');
    var im = $("<img>").attr("src",imgSrc).load(function(){
        if(enumThumb == 0){
            imWidth = this.width;
            imHeight = this.height;
            resizeOverlay(imWidth,imHeight,imgSrc);
        }
        perc = perc + (100/imageCount);
        var loaderWidth = Math.round(winWidth*perc/100);
        $('#thumb_loader').stop().animate({'width':loaderWidth+'px'});
        if(Math.round(perc) >= 100){
            $('#thumb_loader').animate({
                'height':'1px',
                'margin-top':'0px'
            },'fast',function(){
                $('#thumb_loader').addClass('loaded');
            });
        }
    });
    cache.push(im);
});
$('#images_overlay').find('#thumbs').css({
    'width':thumbHolderWidth+'px',
    'height':thumbHolderHeight+10+'px',
    'left':winWidth/2-thumbHolderWidth/2+'px'
})
$('#images_overlay').find('#thumbs').fadeIn();
}

jQuery的each方法为回调函数提供索引。您不需要专用的迭代器变量

$( '.myElement' ).each(function ( i ) {
    // use i here
});

jQuery的each方法为回调函数提供索引。您不需要专用的迭代器变量

$( '.myElement' ).each(function ( i ) {
    // use i here
});

---

您似乎没有传递正确的mySrc值

mySrc应该类似于yourmage.jpg

为什么需要使用num++？您可以使用每个函数本身获取元素的索引

---

您似乎没有传递正确的mySrc值

mySrc应该类似于yourmage.jpg

为什么需要使用num++？您可以使用每个函数本身获取元素的索引

您将$.each函数与for循环混淆了。不需要num变量或递增它

下面是一个示例，说明如何使用$.each函数的所有功能

function loadImages(){
  $('.myElement').each(function(i, el){
    var image = $('<img>', {
      src: 'myimage'+i+'.jpg' // Loads a different image for each element.
    }).load(function(){
      image.hide().appendTo( $(el) ).fadeIn();  // Once loaded, appends image to .myElement and fades it in
    });
  });
}

您将$.each函数与for循环混淆了。不需要num变量或递增它

下面是一个示例，说明如何使用$.each函数的所有功能

function loadImages(){
  $('.myElement').each(function(i, el){
    var image = $('<img>', {
      src: 'myimage'+i+'.jpg' // Loads a different image for each element.
    }).load(function(){
      image.hide().appendTo( $(el) ).fadeIn();  // Once loaded, appends image to .myElement and fades it in
    });
  });
}

您创建的num在loadImages函数的作用域内，完成每个函数后，num的值将成为其最大值。现在'load'是一个异步的东西，即使在每次完成后都会调用它，此时'num'的值应该是最大值。因此，对于load的每个调用，num已经达到其最大值，并且num==1永远不会满足

一种解决方案可以是：

function loadImages(){
   $('.myElement').each(function(num){
     var image = $("<img>")
       .attr("src",mySrc)
       .load((function(numAlias){
         return function() {
            if(numAlias == 1){
            //do something - does not work
            }
          }
      })(num));       
   });
}

有关为每个迭代创建子范围的更多说明，请参见此处

也可能存在特定于浏览器的情况，在附加负载之前设置src时，可能会遗漏负载事件。这个问题以前就存在过，不确定它是否已经修复，比如有时候Chrome的cahced图像会出现bug

加载后添加src看起来是一种可靠的方法

var image = $("<img>").load(function(){
         if(num == 1){
            //do something - does not work
         }
      }).attr("src",mySrc); 

您创建的num在loadImages函数的作用域内，完成每个函数后，num的值将成为其最大值。现在'load'是一个异步的东西，即使在每次完成后都会调用它，此时'num'的值应该是最大值。因此，对于load的每个调用，num已经达到其最大值，并且num==1永远不会满足

一种解决方案可以是：

function loadImages(){
   $('.myElement').each(function(num){
     var image = $("<img>")
       .attr("src",mySrc)
       .load((function(numAlias){
         return function() {
            if(numAlias == 1){
            //do something - does not work
            }
          }
      })(num));       
   });
}

有关为每个迭代创建子范围的更多说明，请参见此处

也可能存在特定于浏览器的情况，在附加负载之前设置src时，可能会遗漏负载事件。这个问题以前就存在过，不确定它是否已经修复，比如有时候Chrome的cahced图像会出现bug

加载后添加src看起来是一种可靠的方法

var image = $("<img>").load(function(){
         if(num == 1){
            //do something - does not work
         }
      }).attr("src",mySrc); 

---

加载处理程序执行了吗？你的例子太做作了。num代表什么？num++应该在循环内吗？顺便说一句，所有的加载处理程序都引用相同的num变量，该变量的值始终为2。是的，当然，num++必须在循环内并用于枚举元素加载处理程序是否执行？您的示例太过做作了。num代表什么？num++应该在循环内吗？顺便说一句，所有加载处理程序都引用相同的num变量，该变量的值始终为2。是的，当然，num++必须在循环内，用于枚举elements@Sobakinet：如果你能提供一个演示，那就更好了。您可以使用它来提供一些演示并不容易，它是关于通过json加载的图像的，但是我添加了完整的函数code@Sobakinet：如果你能提供一个演示，那就更好了。你可以使用它，它不是很容易提供一些演示，它是关于图像的，通过json加载，但我添加了完整的函数codetnx，我只是不是一个编码器，对jquery知之甚少。对于tipp的Thx，它很有用，我总是使用var来处理这个tnx，我只是不是一个编码员，对jquery知之甚少。对于tipp，它是有用的，我总是再次使用var来表示这个Thx，我理解，每个函数都不需要特殊的var。但在我的例子中，我有一些类似的元素，比如我用JSON ind生成的图像拇指，我必须对它们进行循环。图像的URL是缩略图中的一些属性。请看我在我的问题中添加的coode…我明白了，Thx再次说明，每个函数都不需要特殊的var。但在我的例子中，我有一些类似的元素，比如我用JSON ind生成的图像拇指，我必须对它们进行循环。图像的URL是缩略图中的一些属性。请看我在问题中添加的coode。。。