`
endual
  • 浏览: 3560652 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery 图片加载失败

 
阅读更多

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">
 
<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>

 

 

分享到：
| ajax 超时设置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery图片加载失败替换默认图片方法汇总

    总结，jQuery图片加载失败替换默认图片的方法多种多样，可以根据实际需求选择适合的方案。无论是直接绑定error事件、利用img的complete属性、使用事件委托、事件捕获还是借助imagesLoaded插件，都可以有效地处理图片...

    jQuery图片懒加载代码

    - **错误处理**：处理图片加载失败的情况，如提供备用图片或显示错误提示。 综上所述，jQuery图片懒加载技术通过延迟加载非可视区域的图片，有效提高了网页加载速度，降低了用户等待时间，提升了整体的用户体验。...

    Jquery 图片懒加载

    failure_limit: 10, // 当加载失败时，尝试加载的图片数量 }); ``` **四、进一步优化** 1. **预加载**：对于首屏图片，可以考虑预加载，提高页面初次打开的速度。 2. **事件监听**：除了滚动事件外，还可以监听...

    jquery图片延迟加载

    **jQuery图片延迟加载** 在网页设计中，图片延迟加载（Lazy Loading）是一种优化技术，用于提升页面加载速度和用户体验。当用户滚动页面时，只加载视口内的图片，而非一次性加载所有图片。这种方式可以减少首屏加载...

    jQuery 图片加载不出来，报错404.docx

    console.error('图片加载失败'); }); }); ``` #### 五、总结 通过以上分析和解决步骤，可以有效解决 jQuery 图片加载时出现的 404 错误。关键是理解图片路径在不同环境下的差异性，并采取相应的措施进行调整。...

    jQuery处理图片加载失败的常用方法

    jQuery作为一种流行的JavaScript库，提供了简单便捷的方式来处理图片加载失败的情况。本文将详细介绍使用jQuery处理图片加载失败的两种常用方法，并且通过实例说明如何在实际项目中应用这些方法。 首先，我们来了解...

    jQuery实现图片预加载

    5. **处理错误**：同时，也需要监听`error`事件，以防图片加载失败。可以设定备用图片或者显示错误信息。 以下是一个简单的预加载图片的jQuery示例代码： ```javascript $(document).ready(function() { var ...

    jquery图片预加载

    4. **错误处理**：同时，我们还需要监听`error`事件，处理图片加载失败的情况。 **四、jQuery.LoadImage插件** 在实际开发中，为了简化代码和提高可维护性，通常会使用插件。`jquery.LoadImage`就是一个专门用于...

    jquery异步加载页面

    alert('加载失败，请稍后再试'); } }); }); }); ``` 此外，jQuery还提供了方便的.load()方法，它是对$.ajax()的简单封装，适用于从服务器加载HTML片段。在上述示例中，我们可以将$.ajax()替换为.load()： ```...

    jQuery图片预加载插件源码.zip

    4. **错误处理**：对于加载失败的图片，插件会提供错误处理机制，例如记录错误信息，或者尝试备用图片。 5. **进度反馈**：为了提供用户反馈，插件可能包含一个进度条或百分比显示，实时更新预加载的进度。 四、预...

    图片预加载、占位背景图jquery plugin

    总的来说，`jQuery-preloading-with-image`插件简化了预加载图片的实现，通过jQuery的链式操作和丰富的回调机制，使得开发者能够更好地控制图片加载过程，提升网页性能和用户体验。对于那些希望优化图片加载速度，...

    jquery 加载图片大全

    图片加载失败时，我们可以提供备用图片或者提示信息。jQuery的`.error()`方法可以捕捉到这个事件： ```javascript $('img').error(function() { $(this).attr('src', 'default.jpg'); // 替换为默认图片 }); ``` ...

    jQuery图片预加载代码ydxLazyLoad.js插件

    - `errorImg`：当原图加载失败时，显示的备用图片。 - `callback`：图片加载完成后执行的回调函数。 #### 4.2 自定义事件 ydxLazyLoad.js插件还支持自定义事件，如`beforeLoad`（图片即将加载前触发）和`afterLoad...

    Jquery.ScrollLoading图片延迟加载插件

    - `errorImg`：如果图片加载失败，可以设置一个备选图片。 **6. 性能优化与兼容性** 由于jQuery.ScrollLoading基于jQuery，因此它具有很好的浏览器兼容性，但请注意，对于不支持jQuery的环境，你需要考虑其他的...

    JS加载load图片jquery.LoadImage图片预加载(逐渐加载)demo

    在前端开发中，图片加载是用户体验的关键因素之一。"JS加载load图片jquery.LoadImage图片预加载(逐渐加载)demo"这个项目就是针对这个问题提供的一种解决方案，它利用JavaScript和jQuery库来实现图片的预加载和逐渐...

    jquery实现图片延迟加载过程.rar

    在实际项目中，可能还需要考虑到图片加载状态的反馈（如加载中、加载失败的提示），以及与服务器端的配合，以确保用户体验和数据一致性。对于标签中的"C#"，虽然它通常用于后端开发，但在某些情况下，如ASP.NET项目...

    jquery 异步加载页面

    - **延迟加载**：仅在需要时加载非关键内容，如图片或视频。 ### 结语 jQuery异步加载页面技术是现代Web开发中不可或缺的一部分，它极大地提升了用户体验。理解并熟练运用`$.ajax()`、`.load()`和相关事件，可以...

Magicbox
Global site tag (gtag.js) - Google Analytics