jQuery 当更改 IMG SRC 时知道图像何时完成加载

Question

我有一个缩略图列表。当用户单击缩略图时，我将显示全尺寸图像...问题是我想显示一个微调器，直到图像完全下载。 jQuery 有没有办法知道图像何时完全加载并准备好在浏览器中呈现？

还有没有办法在图像完全下载之前获取图像尺寸？

谢谢

Answer 1

Paul Irish 编写了一个不错的小插件，应该可以解决您的问题。它接受一个回调函数，该函数在给定图像加载完成时触发。不幸的是，因为 jQuery 的 native .load() 方法不适用于缓存图像，所以这是必需的。

https://gist.github.com/268257

// $('img.photo',this).imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images

// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!

// callback function is passed the last image to load
//   as an argument, and the collection as `this`


$.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
      len   = elems.length;

  elems.bind('load',function(){
      if (--len <= 0){ callback.call(elems,this); }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        this.src = src;
     }  
  }); 

  return this;
};