1

我有这样的东西

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) 根本不起作用。我认为，这是因为虽然将加载第一张图像，但 each() 函数仍然有效，并且 var num 具有更大的价值，因为我在 load() 函数中的条件开始发挥作用......我该如何解决它？

谢谢

全功能代码

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

4 回答 4

4

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

$( '.myElement' ).each(function ( i ) {
    // use i here
});
于 2012-07-21T19:50:01.573 回答
0

看来您没有传递正确的mySrc值。

mySrc应该是这样的YourImage.jpg

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

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

于 2012-07-21T19:58:16.047 回答
0

您将$.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
    });
  });
}
于 2012-07-21T20:08:19.460 回答
0

你创建的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));       
   });
}

可以在此处找到有关为每次迭代创建子范围的更多说明，从匿名包装器返回函数？

也可能存在特定于浏览器的情况，在附加负载之前设置 src 时似乎错过了加载事件。问题之前就存在，不确定它是否已修复，例如 Chrome 有时会出现针对 cahced 图像的错误。

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

var image = $("<img>").load(function(){
         if(num == 1){
            //do something - does not work
         }
      }).attr("src",mySrc);
于 2012-07-21T21:21:52.203 回答