图片加载失败之后的处理(引申一下img的complete和onload方法）

如果你的项目用了jquery。 可以使用这个方法；

$("img").error(function(){
　　//当图片加载失败时，你要进行的操作
　　//$(this).attr('src','images/no_pic.jpg');
});

如果没有jquery，可以使用HTML的DOM事件，onerror事件：

HTML 中:
　　<element οnerrοr="myScript">尝试一下

JavaScript 中:
　　object.onerror=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:（注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。）
　　object.addEventListener("error", myScript);

支持的 HTML 标签: <img>, <input type="image">, <object>, <script>, <style>

下面是complete和onload；

1. document.getElementById('load').onclick = function() {  
2.     var img = new Image();  
3.     img.src="images/1-logo.png";  
4.     if(img.complete) {  
5.         console.log('dd');  
6.     }  
7.     img.onload = function() {  
8.         console.log('ff')  
9.     }  
10. } 
11. 
    

打印结果如下：

可以看到，第一次的时候，仅执行了onload，也就是我们看到的仅打印了‘ff'文字，而接下来的每次点击都会出现“dd”,"ff"，这是为什么呢？继续测试，改变位置：

1. document.getElementById('load').onclick = function() {  
2.     var img = new Image();  
3.     if(img.complete) {  
4.         console.log('dd');  
5.     }  
6.     img.onload = function() {  
7.         console.log('ff')  
8.     }  
9.     img.src="";  
10.       
11. } 

仅打印dd；

1. document.getElementById('load').onclick = function() {  
2.     var img = new Image();  
3.     if(img.complete) {  
4.         console.log('dd');  
5.     }  
6.     img.onload = function() {  
7.         console.log('ff')  
8.     }  
9.     img.src="images/1-logo.png";  
10.   
11. }  

dd，ff一起显示；