JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~
1
2
3
4
5
6
7
|
</ head >
< body >
< p >判断百度的LOGO是否存在:< br >
< IMG src = "http://www.baidu.com/img/baidu_logo.gif" onerror = "javascript:this.src='/images/logo.jpg'" ></ p >
< p >如果不存在,则替换成本地网站logo:< br >< IMG src = "http://www.baidu.com/img/baidu_logo11.gif" onerror = "javascript:this.src='/images/logo.gif'" ></ p >
</ body >
</ html >
|
根据此属性用js建立图像对象:
格式:
图像对象名称=new Image([宽度],[高度])
图像对象的属性:
border complete height hspace lowsrc name src vspace width readyState
图像对象的事件:
onabort onerror onkeydown onkeypress onkeyup onload onreadystatechange
程序代码
var img=new Image();
img.onload=function(){alert("img is loaded")}; //它在图像完全载入到内存之后调用。
img.onerror=function(){alert("error!")};//它在图像载入失败后调用,图像载入失败不会调用onload事件。
img.src="image1.jpg";//开始加载图片,加载图片是异步过程。
function show(){alert("body is loaded");};
window.onload=show;
运行上面的代码后,在不同的浏览器中进行测试,发现IE和FF是有区别的,在FF中,img对象的加载包含在body的加载过程中,既是img加载完之后,body才算是加载完毕,触发window.onload事件。
在IE中,img对象的加载是不包含在body的加载过程之中的,body加载完毕,window.onload事件触发时,img对象可能还未加载结束,img.onload事件会在window.onload之后触发。
根据上面的问题,考虑到浏览器的兼容性和网页的加载时间,尽量不要在Image对象里放置过多的图片,否则在FF下会影响网页的下载速度。当然如果你在 window.onload之后,执行预加载函数,就不会FF中的问题了。
对于onload事件的绑定,不要放在src=’……’语句后面,因为加载图片的速度可能很快,如果图片加载完毕后,绑定onload事件的代码还没来得及执行,就会造成绑定到onload事件的函数没机会执行。其他事件的绑定也要注意这一点。
代码简化后如下:
var img = new Image();
img.src = “test.gif”;
img.onload = function(){
alert(this.src);
//other
};
简单看过以后貌似这段代码没有什么问题,可是IE下就不是能正常的运行。不管怎么检测,IE根本不会理会,不过还是找到了解决的方法,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……
var img = new Image();
img.onload = function(){
alert(this.src);
//other
};
img.src = “test.gif”;
测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。 所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。反过来说,firefox明显更智能一些,加入onload事件后,firefox浏览器会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
img 判断图片加载完成:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> < html >
< head >
</ head >
< body >
< script >
//判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase(); Browser.ie=/msie/.test(Browser.userAgent); Browser.Moz=/gecko/.test(Browser.userAgent); //判断是否加载完成 function Imagess(url,imgid,callback){ var val=url;
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
callback(img,imgid);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback(img,imgid);
}
}
}
//如果因为网络或图片的原因发生异常,则显示该图片
img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
img.src=val;
} //显示图片 function checkimg(obj,imgid){ document.getElementById(imgid).src=obj.src; } //初始化需要显示的图片,并且指定显示的位置 window.onload=function(){ Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img1",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img2",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img3",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img4",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpgdddddddddddddddddddddddd","img5",checkimg);
} </ script >
< img id = "img1" src = "loading.gif" width = "100" height = "100" />
< img id = "img2" src = "loading.gif" width = "100" height = "100" />
< img id = "img3" src = "loading.gif" width = "100" height = "100" />
< img id = "img4" src = "loading.gif" width = "100" height = "100" />
< img id = "img5" src = "loading.gif" width = "100" height = "100" />
</ body >
</ html >
|
jQuery实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head >
< title >无标题页</ title >
< script language = "javascript" type = "text/javascript" src = "http://www.mainaer.com/JS/jquery-1-3-2.js" ></ script >
</ head >
< body >
< div >
</ div >
< div id = "msgTool" >
</ div >
< script language = "javascript" type = "text/javascript" >
$(function (){
$("img").each(function (i,e){
var imgsrc = $(e).attr("src");
$(e).load(function(){
$("< p > ok "+ $(e).width()+":"+$(e).height()+"</ p >").appendTo("#msgTool");
}).error(function() {
$("< p > error "+ imgsrc +"</ p >").appendTo("#msgTool");
$(e).attr("src","http://www.mainaer.com/uploadfiles/mainaer/nopic.gif");
}) ;
});
});
</ script >
</ body >
</ html >
|
相关推荐
主要介绍了jQuery图片加载失败替换默认图片方法汇总,运用到的相关知识jquery的ready方法、$("img").error()、img的complete属性、插件imagesLoaded、事件委托、事件捕获和图片预加载的方法等,需要的朋友可以参考下
主要介绍了jQuery处理图片加载失败的常用方法,实例演示了jQuery处理图片加载失败时提示加载失败及隐藏加载失败信息的方法,需要的朋友可以参考下
本文实例讲述了js针对图片加载失败的处理方法。分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决...
通过jquery promise实现一张一张的连续图片的加载功能,当图片加载错误,超时后会显示加载图片加载失败。对jquery promise实现加载图片的相关资料感兴趣的朋友参考下
jQuery 延迟图像 加载所选图像后执行回调。 (请注意,这可能不适用于跨浏览器,请参阅: ://api.jquery.com/load-event/)安装手动或...选项完毕类型: function 默认值:noop 成功加载所有图像后调用的函数失败类型:
遮罩用途及效果 ShowLoading这个jQuery插件设计用于当运行Ajax请求时,可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。 有时候我们页面调用后台程序时间比较长时,前台页面暴露在用户之下,...
:police_car_light:重要! 很抱歉,这个项目已不再维护了,可能很长一段...按需加载(会根据对应的设备自动初始化加载JS文件,减少多余的长度) 原生JS编写,不依赖例如jquery等第三方库,支持AMD或CMD规范。 原因,
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv...
注意到网页中一张图片加载失败会触发error事件,因此可以使用DOM模型中的load和error事件实现这一效果。 \nsrc1='main/image.jpg' //主路径\nsrc2='another/image.jpg' //备用路径 jQuery 1.8以前 使用load和error...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的...
UM的主要特点就是容量和加载速度上的改变,全版本的代码量为125k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的...
pdfh5.js基于pdf.js和jQuery,web / h5 /移动端PDF预览手势插件。 注意:本地绝对路径地址不能加载,跨域问题用代理或服务端解决。 svg模式渲染存在缺陷,只能渲染普通pdf,带签名,印章的可能会渲染不全,...
02 alex首秀失败 03 自定义admin样式 04 admin补充 05 COOKIE介绍 06 COOKIE和SESSION配合使用 第54章 01 今日内容概要 02 Django内容回顾 03 Django请求生命周期之Http请求 04 Django请求生命周期之FBV和CBV 05 ...
-加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)。 -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例,使用验证图片(feedback:kedee)...