`
charrys
  • 浏览: 36167 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

关于图片延迟加载技术-ImageLazyLoad

    博客分类：
  • js
VisioYUIjQueryBingJavaScript 
阅读更多

关于图片延迟加载技术的优点与缺点(来自http://www.ok22.org/art_detail.aspx?id=88)

因为工作需要所以最近研究了一下淘宝、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 (elementelement = 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:800px}   
  100.     </style>  
  101. </head>  
  102. <body>  
  103.     <div>  
  104.     <img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474029890_big.jpg" /><br/>  
  105.     <img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474372951_big.jpg" /><br/>  
  106.     <img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/06/2010050616595471474_big.jpg" /><br/>  
  107.     <img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474693772_big.jpg" /><br/>  
  108.     <img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/05/2010050511370456961_big.jpg" /><br/>  
  109.     <img lazy_src="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051311000442310_big.jpg" /><br/>  
  110.     </div>  
  111.     <script type="text/javascript">  
  112.         lazyLoad.init();    
  113.     </script>  
  114. </body>  
  115. </html>  
  116.     

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

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

1.与Ajax技术的冲突；

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

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

分享到：
| js判断父页存在
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片延迟加载(imageLazyLoad)

    图片延迟加载（Image Lazy Load）是一种优化网页性能的技术，它主要应用于含有大量图片的页面，以提高页面加载速度和用户体验。这种技术的核心思想是只在图片实际需要显示时（即进入用户视口）才进行加载，而不是一...

    jquery图片延迟加载

    2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件 $("img").lazyload({ placeholder : "img/grey.gif", event : "click" }); 3.可以通过定义effect 参数来定义一些图片显示效果 $("img")...

    基于jQuery的图片延迟加载功能的实现

    其中，图片延迟加载技术是一种有效提高网页加载速度的技术，通过延迟非可视区域内图片的加载来减轻服务器负担，并提升用户的浏览体验。本文将详细介绍如何利用jQuery框架来实现图片延迟加载功能。 #### 二、jQuery...

    MUI 解决动态列表页图片懒加载再次加载不成功的bug问题

    // 清除body上的data-imageLazyload属性，以便重新加载图片 document.body.removeAttribute('data-imageLazyload'); // 重新调用imageLazyload，传入配置项 mui(document).imageLazyload({ placeholder: '../../...

    jquery.lazyload 实现图片延迟加载jquery插件

    ImageLazyLoad 技术是一种优化网页性能的方法，它只加载当前可视区域内的图片，而非一次性加载所有图片。当用户滚动页面，即将进入视口的图片才会开始加载。这种方式可以显著提高网页加载速度，特别是在高分辨率或大...

    图片懒加载

    在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5...

    lazyLoad.js懒加载技术应用实例

    lazyLoad懒加载技术应用实例，适用于图片多的网站。...这里要实现的功能：可见页面的图片是加载的，而不可见页面通过滚动条下拉可见，这也叫做“ImageLazyLoad技术”，需要用到延迟加载的jQuery插件

Magicbox
Global site tag (gtag.js) - Google Analytics