绿色资源网:您身边最放心的安全下载站! 最新软件|热门排行|软件分类|软件专题|论坛转帖|厂商大全

绿色资源网

技术教程
您的位置:首页网页设计网页特效 → 网站图片延迟加载的实现

网站图片延迟加载的实现

我要评论 2012/06/09 11:01:17 来源:绿色资源网 编辑:downcc.com [ ] 评论:0 点击:521次

图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。

图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。

  1. <img src="images/placeholder.png"  lazy-src="images/realimg.jpg" /> 

因为是使用javascript来加载图片,如果用户禁用了javascript,可以设置一个替代的方案。

  1. <img src="images/placeholder.png"  lazy-src="images/realimg.jpg" alt="" /> 
  2. <noscript><img src="images/realimg.jpg"  alt="" /></noscript> 

页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow),计算出可视区域,当图片的位置出现在可视区域中,将src的值替换成真实的地址,此时图片就开始加载了。

当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器,那么也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的延迟加载。

下面是实现的代码,我写成了jQuery插件。

  1. (function( $ ){ 
  2. $.fn.imglazyload = function( options ){ 
  3.     var o = $.extend({ 
  4.                 attr        :   'lazy-src', 
  5.                 container   :   window, 
  6.                 event       :   'scroll', 
  7.                 fadeIn      :   false, 
  8.                 threshold   :   0, 
  9.                 vertical    :   true 
  10.             }, options ), 
  11.  
  12.         event = o.event, 
  13.         vertical = o.vertical, 
  14.         container = $( o.container ), 
  15.         threshold = o.threshold, 
  16.         // 将jQuery对象转换成DOM数组便于操作 
  17.         elems = $.makeArray( $(this) ), 
  18.         dataName = 'imglazyload_offset'
  19.         OFFSET = vertical ? 'top' : 'left', 
  20.         SCROLL = vertical ? 'scrollTop' : 'scrollLeft', 
  21.         winSize = vertical ? container.height() : container.width(), 
  22.         scrollCoord = container[ SCROLL ](), 
  23.         docSize = winSize + scrollCoord; 
  24.  
  25.     // 延迟加载的触发器 
  26.     var trigger = { 
  27.  
  28.         init : function( coord ){ 
  29.             return coord >= scrollCoord && 
  30.                             coord <= ( docSize + threshold ); 
  31.         }, 
  32.  
  33.         scroll : function( coord ){ 
  34.             var scrollCoord = container[ SCROLL ](); 
  35.             return coord >= scrollCoord && 
  36.                     coord <= ( winSize + scrollCoord + threshold ); 
  37.         }, 
  38.  
  39.         resize : function( coord ){ 
  40.       &

关键词:图片延迟加载

阅读本文后您有什么感想? 已有 人给出评价!

  • 53 欢迎喜欢
  • 1 白痴
  • 1 拜托
  • 1 哇
  • 1 加油
  • 1 鄙视