jQuery的（）去更快的load（）

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

而且如果條件（NUM == 1）沒有在所有的工作。我認爲，這是因爲當第一個圖像被加載時，each（）函數仍然有效，而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'的值應該是最大值。所以對於loadnum每次調用已經處於其最大值和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);