devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

关于图片延迟加载技术-ImageLazyLoad_image lazyload

作者：知新_RL | 2024-02-20 21:03:23

赞

踩

image lazyload



最近做的项目遇到图片比较多的网页展示，发现图片加载比较慢，网上找了一下关于图片延迟加载的资料，mark一下。


------------------------------------------

关于图片延迟加载技术的优点与缺点

因为工作需要所以最近研究了一下淘宝、QQ、拍拍等几个大型网站的图片延迟加载技术！所以与大家分享一下，仅是代表我的个人观点

图片延迟加载技术（ImageLazyLoad），在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可是界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。

使用此技术的网站有太多太多，如淘宝，还有一些动漫网站，眼下比较常用的图片延迟加载技术有四种：kissy(淘宝的JS框架),Jquery 图片延迟插件，Prototype，YUI 2。

YUI的图片延迟技术是就成熟的，Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术（Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac），闲话不说，一起来看看如何使用。


下面的例子可直接粘贴到html文件中运行

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title>js延时加载</title>
  4.     <script type="text/javascript">
  5.         lazyLoad = (function () {
  6.             var map_element = {};
  7.             var element_obj = [];
  8.             var download_count = 0;
  9.             var last_offset = -1;
  10.             var doc_body;
  11.             var doc_element;
  12.             var lazy_load_tag;
  13.             
  14.             function initVar(tags) {
  15.                 doc_body = document.body;
  16.                 //判断是否为IE的"怪异模式"
  17.                 doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
  18.                 lazy_load_tag = tags || ["img", "iframe"];
  19.             };
  20.  
  21.             function initElementMap() {
  22.                 //var all_element = [];
  23.                 //从所有相关元素中找出需要延时加载的元素  
  24.                 for (var i = 0, len = lazy_load_tag.length; i < len; i++) {
  25.                     var el = document.getElementsByTagName(lazy_load_tag[i]);
  26.                     for (var j = 0, len2 = el.length; j < len2; j++) {
  27.                         if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) {
  28.                             element_obj.push(el[j]);
  29.                         }
  30.                     }
  31.                 }
  32. 				
  33.  
  34.                 for (var i = 0, len = element_obj.length; i < len; i++) {
  35.                     var o_img = element_obj[i];
  36.                     var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离  
  37.                     if (map_element[t_index]) {
  38.                         map_element[t_index].push(i);
  39.                     } else {
  40.                         //按距上距离保存一个队列  
  41.                         var t_array = [];
  42.                         t_array[0] = i;
  43.                         map_element[t_index] = t_array;
  44.                         download_count++; //需要延时加载的图片数量  
  45.                     }
  46.                 }
  47.  
  48.             };
  49.  
  50.             function initDownloadListen() {
  51.                 if (!download_count) return;
  52.                 var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
  53.                 //可视化区域的高=offtset+document的高  
  54.                 var visio_offset = offset + doc_element.clientHeight;
  55.                 if (last_offset == visio_offset) {
  56.                     setTimeout(initDownloadListen, 200);//每隔0.2秒检测一次，这玩意儿感觉有些耗资源的
  57.                     return;
  58.                 }
  59.                 last_offset = visio_offset;
  60.                 var visio_height = doc_element.clientHeight;
  61.                 var img_show_height = visio_height + offset;
  62.                 for (var key in map_element) {
  63.                     if (img_show_height > key) {
  64.                         var t_o = map_element[key];
  65.                         var img_vl = t_o.length;
  66.                         for (var l = 0; l < img_vl; l++) {
  67.                             element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
  68.                         }
  69.                         delete map_element[key];
  70.                         download_count--;
  71.                     }
  72.                 }
  73.                 setTimeout(initDownloadListen, 200);
  74.             };
  75.  
  76.             function getAbsoluteTop(element) {
  77.                 if (arguments.length != 1 || element == null) {
  78.                     return null;
  79.                 }
  80.                 var offsetTop = element.offsetTop;
  81.                 while (element = element.offsetParent) {
  82.                     offsetTop += element.offsetTop;
  83.                 }
  84.                 return offsetTop;
  85.             }
  86.  
  87.             function init(tags) {
  88.                 initVar(tags);
  89.                 initElementMap();
  90.                 initDownloadListen();
  91.             };
  92.  
  93.             return {
  94.                 init: init
  95.             }
  96.         })();
  97.     </script>
  98. 	<style type="text/css">
  99. 		img{height:320px}
  100. 	</style>
  101. </head>
  102. <body>
  103.     <div>
  104.     <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0910.jpg " /><br/>
  105.     <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0911.jpg" /><br/>
  106.     <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0912.jpg" /><br/>
  107.     <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0913.jpg" /><br/>
  108.     <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0915.jpg" /><br/>
  109.     <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0916.jpg" /><br/>
  110. <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0917.jpg" /><br/>
  111. <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0918.jpg" /><br/>
  112. <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0919.jpg" /><br/>
  113. <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0920.jpg" /><br/>
  114. <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0921.jpg" /><br/>
  115.     </div>
  116.     <script type="text/javascript">
  117.         lazyLoad.init(); 
  118.     </script>
  119. </body>
  120. </html>

 LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致；

但做为技术而言没有十全十美的技术，缺点也是有的：

1.与Ajax技术的冲突；

2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；

3.写代码不规范的朋友要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用 ImageLazyLoad。


如需转载请注明出处: http://www.86y.org/art_detail.aspx?id=88 【关于图片延迟加载技术-ImageLazyLoad】幸凡学习网

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/120889
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号