jquery判断图片是否加载完毕

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30367543

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kinger/p/4292412.html

版权

来源： < http://www.2cto.com/kf/201409/331234.html >

利用图片没有加载完成的时候，宽高为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的宽高.

转载于:https://www.cnblogs.com/kinger/p/4292412.html

weixin_30367543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery判断图片是否加载完毕

来源：<http://www.2cto.com/kf/201409/331234.html>利用图片没有加载完成的时候，宽高为0。我们很容易判断图片的一个加载情况。如下：思路:判断图片高度 --> 存在高度等于0--> 定时500毫秒再次扫描 --> 直到全部不等于0-->进行下一步处理注意:引入jquery.js 1 ...
复制链接

扫一扫