jquery判断图片是否加载完毕
利用图片没有加载完成的时候，宽高为0。我们很容易判断图片的一个加载情况。如下：
思路:判断图片高度 --> 存在高度等于0 --> 定时500毫秒再次扫描 --> 直到全部不等于0 -->进行下一步处理
注意:引入jquery.js
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>load event</title> 6 <script language="javascript" src="jquery.js"></script> 7 </head> 8 <body> 9 <img src="http://home.baidu.com/resource/r/home/img/logo-yy.gif" alt="" class='cover'/> 10 </body> 11 <script> 12 var t_img; // 定时器 13 var isLoad = true; // 控制变量 14 15 // 判断图片加载状况，加载完成后回调 16 isImgLoad(function(){ 17 // 加载完成 18 //document.write('图片加载完成!'); 19 alert('图片加载完成'); 20 }); 21 22 // 判断图片加载的函数 23 function isImgLoad(callback){ 24 // 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。 25 // 查找所有封面图，迭代处理 26 $('.cover').each(function(){ 27 // 找到为0就将isLoad设为false，并退出each 28 if(this.height === 0){ 29 isLoad = false; 30 return false; 31 } 32 }); 33 // 为true，没有发现为0的。加载完毕 34 if(isLoad){ 35 clearTimeout(t_img); // 清除定时器 36 // 回调函数 37 callback(); 38 // 为false，因为找到了没有加载完成的图，将调用定时器递归 39 }else{ 40 isLoad = true; 41 t_img = setTimeout(function(){ 42 isImgLoad(callback); // 递归扫描 43 },500); // 我这里设置的是500毫秒就扫描一次，可以自己调整 44 } 45 } 46 </script> 47 </html>
需要注意的是,该方法不能判断图片是否存在.即使图片不存在,img在请求完成后,会有一个不为0的宽高.
