如何確保圖像在JQuery插件中加載？

Question

創建一個需要圖片尺寸的JQuery插件時，我發現像Chrome這樣的webkit瀏覽器通常會爲圖片返回0尺寸，因爲它們是並行加載的。

我的快速和骯髒的解決辦法是包裝調用我的插件在$(window).load()事件中的代碼：

$(document).ready(function() { 
    $(window).load(function() { 
     $('.magnifier').magnifier(); 
    }); 
}); 

我怎麼會去實現這個插件本身裏面？檢測圖像已加載的最乾淨的方法是什麼，以便我可以測量它們的尺寸？

Answer 1

的圖像具有的load（）事件，所以你可以這樣做：

$(document).ready(function() { 
    $('.magnifier').magnifier(); 
}); 

$.fn.magnifier = function() { 
    return this.each(function() { 
     $(this).find('img').load(function() { 
      // do something to image when it is loaded 
     }); 
    }); 
} 

你也可以簡單地環繞window.load代碼插件本身內：

$.fn.magnifier = function() { 
    var that = this; 
    $(window).load(function() { 
     that.each(function() { 
      $(this).find('img').each(function() { 
       // image would be loaded at this point 
      }); 
     }); 
    }); 
    return this; 
} 

Answer 2

我我不確定自己完全理解，但是在加載完所有圖像後，這將會觸發。

$("img").load(function() { 

});