Question

我有类似的东西

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

条件if（num == 1）根本不起作用。我想，这是因为当第一个图像被加载时，每个（）函数仍然有效，而var num有一些更大的值，因为我在load（）函数中的条件会起作用...我该如何修复它？

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

Answer 1

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

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

Answer 2

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

mySrc应该是YourImage.jpg

$('<img>').attr('src', mySrc).load(function() {  
  alert('Image Loaded');  
});

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

Answer 3

您将$.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
    });
  });
}

Answer 4

您创建的num位于函数loadImages的范围内，一旦each完成，num的值将是其最大值。现在'load'是一个异步的东西，即使在each完成后它也会被调用，那时'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));       
   });
}

有关为每次迭代创建子范围的更多说明，请参见Return a function from the anonymous wrapper?

在附加加载之前设置src时，也可能存在浏览器特定情况，其中可能看起来错过了加载事件。之前的问题出现了，不确定它是否已修复，有时会出现Chrome浏览器中的错误信息。

加载后添加src看起来像一种可靠的方式。

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

Jquery each（）作为load（）变得更快

4 个答案: