随笔- 441 文章- 0 评论- 86 阅读- 40万

JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现（如果因为网络或图片的原因发生异常，则显示该图片）~

</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实现：

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