Question

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

还有一种方法可以在图像完全下载之前获取图像尺寸吗？

由于

Answer 1

单击缩略图时显示微调器。然后将一个函数添加到隐藏微调器的图像的load event。

您可以使用服务器端语言来获取图像的大小。 PHP有getimagesize

Answer 2

保罗爱尔兰写了一个很好的小插件，可以解决你的问题。它接受在给定图像加载完成时触发的回调函数。不幸的是，因为jQuery的原生.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;
};

Answer 3

点击这里的工作示例：

http://jsfiddle.net/treeface/u4rs5/2/

基本上，您可以在Javascript中创建new Image() var并将回调函数附加到load事件，以便在准备好时将显示图像设置为相同的src。

修改：这适用于我尝试的每个浏览器，包括Opera，Safari，Chrome，Firefox，IE6 / 7/8/9。

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

3 个答案: