jquery 图片加载失败

最新推荐文章于 2021-03-02 15:15:49 发布
最新推荐文章于 2021-03-02 15:15:49 发布
阅读量322 收藏
点赞数
分类专栏： jquery html ajax 文章标签： javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenweishaoxing/article/details/84417630
版权
jquery 同时被 3 个专栏收录
46 篇文章 0 订阅
订阅专栏
html
43 篇文章 0 订阅
订阅专栏
ajax
36 篇文章 0 订阅
订阅专栏

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.οnlοad=function(){alert("img is loaded")}; //它在图像完全载入到内存之后调用。

img.οnerrοr=function(){alert("error!")};//它在图像载入失败后调用，图像载入失败不会调用onload事件。

img.src="image1.jpg";//开始加载图片,加载图片是异步过程。

function show(){alert("body is loaded");};

window.οnlοad=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">
 
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
     < title >无标题页</ title >
     < script  language = "javascript"  type = "text/javascript"  src = "http://www.mainaer.com/JS/jquery-1-3-2.js" ></ script >
</ head >
< body >
 
 
< div >
< img  src = "http://www.mainaer.com/skin/maps/4.png"  />
< img  src = "http://www.mainaer.com/skin/maps/5_R.png"  />
< img  src = "http://www.mainaer.com/skin/maps/6.png"  />
< img  src = "http://www.mainaer.com/skin/maps/7.png"  />
< img  src = "http://www.mainaer.com/skin/maps/8.png"  />
</ 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 >

 

 

chenweishaoxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js判断服务器端文件是否存在
08-30
js判断服务器端文件是否存在火狐、IE都适用
jQuery图片加载失败替换默认图片方法汇总
10-18
总结，jQuery图片加载失败替换默认图片的方法多种多样，可以根据实际需求选择适合的方案。无论是直接绑定error事件、利用img的complete属性、使用事件委托、事件捕获还是借助imagesLoaded插件，都可以有效地处理图片...
JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现（如果因为网络或图片的原因发生异常，则显示该图片）~...
weixin_30802273的博客
11-10 278
</head> <body> <p>判断百度的LOGO是否存在：<br> <IMG src="http://www.baidu.com/img/baidu_logo.gif" onerror="javascript:this.src='/images/logo.jpg'"></p> <p>如果不存在，则...
使用jQuery来检测远程图片文件是否存在
weixin_30488313的博客
09-29 146
使用jQuery来检测远程图片文件是否存在 最近为我的憨豆人笑园添加图片功能时，遇到了这个问题，用户可以填写一个远程的图片地址，也可以上传一个本地图片。为了不浪费服务器的资源，我们需要在客户端先对用户填写的远程图片地址进行判断，看是否可以访问。可以访问在服务器端就进行处理添加到数据库中。 具体实施方法是这样的： 1、用户添加远程图片到input控件中，并为input控件添加焦点丢失处理...
js 判断文件是否存在(转载)
weixin_34038652的博客
04-21 225
 js 判断文件是否存在(转载) var fso,s=filespec; // filespec="C:/path/myfile.txt"fso=new ActiveXObject("Scripting.FileSystemObject");if(fso.FileExists(filespec))s+=" 文件存在.";elses+=" 文件不存在.";alert(s); 判断服务器端...
判断远程图片是否存在
u013761206的专栏
05-25 999
(1)//判断图片是否存在 function isImageExist(url){ if(url.length==0){ return false; } var isExist=true; $.ajax(url, { dataType: 'JSONP',          async:false,          timeout: 1000,          success
jQuery处理图片加载失败的常用方法
10-24
主要介绍了jQuery处理图片加载失败的常用方法,实例演示了jQuery处理图片加载失败时提示加载失败及隐藏加载失败信息的方法,需要的朋友可以参考下
jQuery动态图片加载代码
07-24
在以上代码中，当图片加载成功时，进度条值设为100%，如果加载失败，进度条值设为0并添加错误样式。 总结起来，jQuery动态图片加载结合进度显示，能显著提升网页性能和用户体验。通过合理利用JavaScript和HTML5特性...
js校验远端图片是否存在
风火一回，一生不毁
03-02 933
js校验远端图片是否存在，因为图片存在于服务器，是异步加载，所以需要使用Promise。 const checkImgExists = (imgurl) => { return new Promise((resolve, reject) => { const ImgObj = new Image(); // 判断图片是否存在 ImgObj.src = imgurl; ImgObj.onload = (res) => { res
js判断远程链接是否有效
hellomy的专栏
09-15 7308
<br />最近在研究javascript，找到了这个老问题。我查了以前的贴子都说是用XMLHTTP请求一次来确认链接的文件是否存在。 　　但是XMLHTTP的测试方式存在有巨大的代价，因为XMLHTTP的请求必须将被请求的文件下载完毕后才能返回结果。如果要测试的连接是一个比较大的文件(如：1M或100M以上的东西)的话，就会需要大量的内存和时间来等待，这个对于只是想知道它存不存在的目的来说，代价太大了。<br />　　我曾想过用XMLHTTP来请求，然后链接成功后主动断开请求，不过似乎XMLHTTP没有这
Javascript判断文件是否存在(客户端/服务器端)
10-25
主要介绍了Javascript判断文件是否存在的方法适用于客户端、服务器端，远程文件，示例代码如下,需要的朋友可以参考下
js注意img图片的onerror事件的分析
10-28
打开网页时提示 Stack overflow at line: 0。img图片的onerror事件需要注意的细节。
JS 判断文件是否存在的方法（非ActiveXobject方法）
清风专栏
06-23 1228
function fileExists(url) { var http = new XMLHttpRequest(); http.open('HEAD', url, false); http.send(); return http.status!==404; }
使用ajax通过URL判断远程服务器是否存在某文件
qq_40184195的博客
08-03 693
背景说明 需求 银行项目，一个理财购买交易，行方要求每个理财产品必须有产品说明书才能进行购买。 分析 理财说明书是通过管理系统进行配置的，会在数据库进行操作记录，并将文件放在服务器上，有两种方式判断一个理财产品是否存在产品说明书。 1、通过数据库查询记录，判断是否存在。缺点：可能存在数据库中有记录，但是文件在服务器被删除，此种判断不准确。 2、通过文件在远程服务器的地址直接判断文件在服务器是否存在。 解决方案 通过ajax直接访问来判断 $.ajax({ url:"",// 文件的URL路径 type:
jQuery-图片加载失败时，显示默认图片
LzzMandy的博客
07-04 2734
有以下几种情况： 1、正常显示图片； <img src="img/bus2.png"> 2、当图片未找到或者404时，触发 onerror 显示默认的图片； <img src="img/bus22.png" onerror="this.src='img/default.png'"> 3、若是默认图片也没找到，会引起崩溃，这时候可以通过设置this.oner...
图片的onerror 事件解析
weixin_30617695的博客
04-25 210
1. 该事件触发条件 文档和图像在加载失败的时候（用户体验会下降。）会触发该事件 2. 解决碎图的办法 利用img的onerror事件和javascript 例： 现有的图片是 successed.png <img src="successed.png"> 正常展示 <img src="successed1.png"> 此时找不到successed1.pn...
div p 等标签的宽度和高度问题
Hi, Sun
03-19 6643
div p 等标签的宽度和高度问题  (2013-01-13 01:31:23) 转载▼ 标签：  杂谈 分类： viewTech 想用一个div 把整个页面填充，代码会怎么写？？？   标题  Hello  测试   用浏览器查看后，效果不是想要的，高度没有100%？？？ 是浏览器兼容问题？？？ 试了其他浏览器，结果一样，还是不行。...
jquery ajax 异步加载图片
最新发布
09-20
可以使用jQuery的ajax方法来异步加载图片。下面是一个示例代码： ```javascript $.ajax({ url: 'image.jpg', method: 'GET', xhrFields: { responseType: 'blob' }, success: function(data) { var img = new Image(); img.onload = function() { // 图片加载完成后的处理逻辑 $('#myImage').append(img); }; img.src = URL.createObjectURL(data); }, error: function(xhr, status, error) { console.log('图片加载失败'); } }); ``` 在上面的代码中，我们使用了jQuery的ajax方法来发送GET请求，设置了`responseType`为`blob`，这样返回的数据将以二进制形式接收。当请求成功后，我们创建了一个新的Image对象，并设置其`src`属性为通过`URL.createObjectURL()`方法生成的URL。最后，将图片元素添加到页面中。 请注意，上述代码中的`image.jpg`是图片的URL地址，你需要将其替换为实际的图片地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值