JQuery判断页面图片是否加载完成并延迟加载

最新推荐文章于 2021-06-08 12:09:05 发布

limengmeng9006

最新推荐文章于 2021-06-08 12:09:05 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/limengmeng9006/article/details/14125091

版权

当页面图片很多、网络又不快时，图片显示会由上往下慢慢显示，这会让使用者观感很不好，故我希望在图片加载完成时，再将该图片显示，并用文字提示加载完成，虽然这个需求有很多JQuery的套件可以完成，且效果都还不错，如 Masonry、Lazy Load，但还是自己想亲手试试，当作给自己的一个小习题 :P

首先先找图片(找超久..)，因放localhost加载会很快，所以我去Google了一些图片，特别要注意的事，这些图片像素都很大，我在img标签指定大小，但这样实际传输的大小会跟原始图片一样大，并不会因为指定Size后而有所改变

<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img1" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img2" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img3" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img4" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img5" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img6" width="300" height="451" />接着于<head></head>放入以下程序代码，当然请记得加载JQuery，程序大概逻辑是，先抓取每个图片的DOM，利用this.complete的语法来判断是否已加载完成，如果加载完成就将此图片显示，并印出此DOM的ID，至于GetRumdomStr函式则可忽略，我只是要在每个Src后面加入参数，让浏览器认为这是一个未cache过的图片。

 
   01. 
   <script type="text/javascript"> 
  
   02. 
   GetRumdomStr = function () { 
  
   03. 
   var str = ""; 
  
   04. 
   var maxNum = 10; 
  
   05. 
   var minNum = 0; 
  
   06. 
   var n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum; 
  
   07. 
   for (var  i = 1; i <= 50; i++) { 
  
   08. 
   n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum; 
  
   09. 
   str += n.toString(); 
  
   10. 
   } 
  
   11. 
   return str; 
  
   12. 
   }; 
  
   13. 
     
   14. 
   $(document).ready(function () { 
  
   15. 
   $('img').hide(); //先把所有图片先隐藏 
  
   16. 
   var ImgCount = $('img').length; //取得图片的个数 
  
   17. 
   $('img').each(function () { 
  
   18. 
   var str = GetRumdomStr(); //请忽略,让图片加随机随机数,视为模拟未曾下载过的图片 
  
   19. 
   var url = $(this).attr("src"); 
  
   20. 
   $(this).attr("src", url + "?" + str); 
  
   21. 
     
   22. 
   function ImageLoading() { 
  
   23. 
   msg = "Image ID : " + this.id + "....done"; 
  
   24. 
   console.log(msg); 
  
   25. 
   $('#msg').append("<div>" + msg + "</div>"); 
  
   26. 
   $(this).fadeIn(2000); 
  
   27. 
   ImgCount--; 
  
   28. 
   if (ImgCount === 0) { 
  
   29. 
   console.log("All images Loaded.."); 
  
   30. 
   } 
  
   31. 
   } 
  
   32. 
     
   33. 
   if ($(this).complete) { 
  
   34. 
   imageLoaded.call(this); 
  
   35. 
   } else { 
  
   36. 
   $(this).one('load', ImageLoading); 
  
   37. 
   } 
  
   38. 
   }); 
  
   39. 
   }); 
  
   40. 
   </script>

limengmeng9006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery判断页面图片是否加载完成并延迟加载

当页面图片很多、网络又不快时，图片显示会由上往下慢慢显示，这会让使用者观感很不好，故我希望在图片加载完成时，再将该图片显示，并用文字提示加载完成，虽然这个需求有很多JQuery的套件可以完成，且效果都还不错，如 Masonry、Lazy Load，但还是自己想亲手试试，当作给自己的一个小习题 :P首先先找图片(找超久..)，因放localhost加载会很快，所以我去Google了一些图片，特别
复制链接

扫一扫