jQuery对图像加载的回调(即使在缓存映像时也是如此)

Question

jQuery对图像加载的回调(即使在缓存映像时也是如此)

我想做的是：

$("img").bind('load', function() {
  // do stuff
});

但是，当从缓存加载图像时，LOAD事件不会触发。jQuery文档建议插件来解决这个问题，但是不管用

Answer 1

我可以建议您将其重新加载到非DOM映像对象中吗？如果它是缓存的，这将不会花时间，而且负载仍然会启动。如果没有缓存，它将在加载映像时触发onload，这应该与映像的DOM版本完成加载的时间相同。JavaScript：$(document).ready(function() {     var tmpImg = new Image() ;     tmpImg.src = $('#img').attr('src') ;     tmpImg.onload = function() {         // Run onload code.     } ; }) ;更新(处理多个图像和正确排序的onload附件)：$(document).ready(function() {     var imageLoaded = function() {         // Run onload code.     }     $('#img').each(function() {         var tmpImg = new Image() ;         tmpImg.onload = imageLoaded ;         tmpImg.src = $(this).attr('src') ;     }) ; }) ;

Answer 2

我的简单解决方案，它不需要任何外部插件，对于普通情况应该足够了：/**  * Trigger a callback when the selected images are loaded:  * @param {String} selector  * @param {Function} callback   */ var onImgLoad = function(selector, callback){     $(selector).each(function(){         if (this.complete || /*for IE 10-*/ $(this).height() > 0) {             callback.apply(this);         }         else {             $(this).on('load', function(){                 callback.apply(this);             });         }     }); };像这样使用它：onImgLoad('img', function(){     // do stuff });例如，要在加载时淡出图像，可以这样做：$('img').hide(); onImgLoad('img', function(){     $(this).fadeIn(700); });或者，如果您更喜欢类似jQuery插件的方法，那么可以这样做：/**  * Trigger a callback when 'this' image is loaded:  * @param {Function} callback  */ (function($){     $.fn.imgLoad = function(callback) {         return this.each(function() {             if (callback) {                 if (this.complete || /*for IE 10-*/ $(this).height() > 0) {                     callback.apply(this);                 }                 else {                     $(this).on('load', function(){                         callback.apply(this);                     });                 }             }         });     }; })(jQuery);并以这样的方式使用：$('img').imgLoad(function(){     // do stuff });例如：$('img').hide().imgLoad(function(){     $(this).fadeIn(700); });