javascript实现图片懒加载

前几天，UED用盒子制作页面，有个页面的需要展示370多个offer，这么多图片同时加载，肯定会影响性能，况且首屏的offer不过超过30个，

所以接下来盒子可能需要使用图片懒加载技术，研究了一下，总结如下：

图片懒加载实现原理如下：​

1.     先将图片真实地址缓存到img标签的一个自定义属性上（如：lazy-src）,而实际img的src地址用一个高宽相当且背景全透明的占位图片代替。如下：

<img src=\'#\'" target="_blank" href="http://img.china.alibaba.com/cms/upload/2012/566/374/473665_417709751.png%22">http://img.china.alibaba.com/cms/upload/2012/566/374/473665_417709751.png"  lazy-src=\'#\'" target="_blank" href="http://test.img.china.alibaba.com/cms/upload/2012/200/630/36002_1551497801.jpg">http://test.img.china.alibaba.com/cms/upload/2012/200/630/36002_1551497801.jpg">

2.     当页面初始加载时，获取图片在页面中的位置并缓存在图片标签中。算出浏览器屏幕可视区域，当图片出现在可视区域中，就把占位图片src地址换成真实图片的地址。这时图片才开始加载。

图片在页面中的位置计算：

1 2 3 4 5 6 7 8 9 10 11 12

function offset(element) {                     var top = element.offsetTop, left = element.offsetLeft, current = element.offsetParent;                     while(current) {                         top += current.offsetTop;                         left += current.offsetLeft;                         current = current.offsetParent;                     }                     return {                         top : top,                         left : left                     };                 }

切换真实图片：

1 2 3 4 5 6 7 8

var isTrigger = self.isImgLoad(offsetTop);//检查图片是否在可视区域                        if(isTrigger) {                 elem. lazySrc;< /span>                 elem.removeAttribute('data-value');                 // 从DOM数组中移除该DOM                 elems.splice(i--, 1);             }

 

3.     当页面滚动或大小发生改变时，再判断图片已缓存的位置是否在可视区域内，进行src加载。

1 2 3 4 5 6 7

if(document.addEventListener) {//标准DOM                     document.addEventListener('scroll', scrollFn, false);                 } else {                     window.onscroll = function() {//ie                          scrollFn();                     }                 }

4.      

5.     当图片全部加载完成后，相应的触发事件卸载，避免重复操作引起的内存泄漏。

1 2 3 4 5 6 7 8 9 10 11

var scrollFn = function() {                     if(imgLoad.elems.length) {//图片还未加载完成                         imgLoad.init();                     } else {//图片加载完成，释放邦定事件                         if (document.removeEventListener){                             document.removeEventListener('scroll',scrollFn,false);                         } else {                             window.onscroll = null;                         }                     }                 }

6.附件为一个完整事例，有兴趣的同学可以一起交流一下，谢谢！