jquery判断图片加载完毕

最新推荐文章于 2024-07-05 15:22:01 发布

weixin_34235135

最新推荐文章于 2024-07-05 15:22:01 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/ffwcn/blog/710468

版权

为什么80%的码农都做不了架构师？>>>

单个图片加载
function loadImage(url, load, error)
{
	var img = new Image(); //创建一个Image对象，实现图片的预下载
	img.src = url;
	if(img.complete)//如果图片已经存在于浏览器缓存，直接调用回调函数
	{
		load.call(img, img.width, img.height);
		return; // 直接返回，不用再处理onload事件
	}
	img.onload = function () {
		load && load.call(img);//将回调函数的this替换为Image对象
	};
	img.onerror = function () {
		error && error.call(img);
		img = img.onload = img.onerror = null;
	};
};

下面是针对多个image的加载判断。

关于Deferred的应用，参见这篇文章：

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
  dfd.resolve();
 }).bind('error',function(){
 //图片加载错误，加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
  dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
    callback();
});

转载于:https://my.oschina.net/ffwcn/blog/710468