图片懒加载插件实战

———————————————————————————————最新更新—————————————————————————————————-

 

在面试的时候有面试官问我，懒加载这个插件你有没有想到如何去 优化？又间接问我 函数节流的问题，嘿嘿，今天就更新下这个插件，顺便应用下函数节流（throttle），先直接上下代码，含解析

 1 /*
 2      * 函数功能：函数节流
 3      * fn  须要调用的函数
 4      * delay  函数须要延迟处理的时间
 5      * mustRunDelay  超过该时间，函数必定会执行
 6      * */
 7     var throttle = function (fn, delay, mustRunDelay) {
 8         var timer;  //使用闭包存储timer
 9         var t_start;
10         //闭包返回的函数
11         return function (val) {
12             var args = arguments, t_curr = +new Date();  //使用+new Date() 将字符串转换成数字
13             clearTimeout(timer);
14             if (!t_start) {  // 使用!t_start 若是t_start=undefined或者null 则为true
15                 t_start = t_curr;
16             }
17             if (t_curr - t_start >= mustRunDelay) {
18                 fn.apply(null, args);
19                 t_start = t_curr;
20             } else {
21                 timer = setTimeout(function () {
22                     fn.apply(null, args);
23                 }, delay);
24             }
25         }
26     };
27 
28  /*使用方法*/
29     var throttle1 = throttle(fn, 500, 4000);
30     //在该须要调用的函数内部调用此函数
31     throttle1(val); //此处传人的参数为以上fn须要传人的参数

至于函数节流具体的好处，经常使用的场景，如下文章说得很是清楚，我就再也不说啦～

 

好文推荐：

http://www.alloyteam.com/2012/11/javascript-throttle/#prettyPhoto

http://www.cnblogs.com/LuckyWinty/p/5949970.html

 

—————————————————————————————华丽的分割线————————————————————————————

 

 

不少网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。因而心血来潮，决定本身手动写一下’图片懒加载‘插件。

 

• 使用这个技术有什么显著的优势？

好比一个页面中有不少图片，如淘宝首页等等，一个页面有100多的图片，若是一上来就发送这么多请求，页面加载就会很漫长，若是js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就很差办了。用户感受这个页面就会很卡。

 

• 懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。经过动态改变img的src属性实现。

当访问一个页面的时候，先把img元素或是其余元素的背景图片路径替换成loading图片地址（这样就只需请求一次）

等到必定条件（这里是页面滚动到必定区域），用实际存放img地址的laze-load属性的值去替换src属性，便可实现'懒加载'。

//即便img的src值为空，浏览器也会对服务器发送请求。因此平时作项目的时候，若是img没有用到src，就不要出现src这个属性 

 

• 先上三个重要的知识点

1.获取屏幕可视窗口大小：

document.documentElement.clientHeight 标准浏览器及低版本IE标准模式

document.body.clientHeight 低版本混杂模式

2. 元素相对于文档document顶部

element.offsetTop

3.滚动条滚动的距离

document.documentElement.scrollTop   兼容ie低版本的标准模式 

document.body.scrollTop 兼容混杂模式；

 

滚动加载：当图片出如今可视区域时，动态加载该图片。

原理：当图片元素顶部是否在可视区域内， （图片相对于文档document顶部-滚动条滚动的距离）< 可视窗口大小，改变该img的src属性

 

实现原理：

1.首先从全部相关元素中找出须要延时加载的元素，放在element_obj数组中。

 1  function initElementMap() {
 2       var el = document.getElementsByTagName('img');
 3       for (var j = 0, len2 = el.length; j < len2; j++) {
 4   //判断当前的img是否加载过了，或者有lazy_src标志  [未完成]
 5           if (typeof (el[j].getAttribute("lazy_src"))) {
 6               element_obj.push(el[j]);
 7               download_count++;
 8           }
 9       }
10  }      

2.判断数组中的img对象，若知足条件，则改变src属性

 1 function lazy() {
 2     if (!download_count) return;
 3     var innerHeight = getViewport();
 4     for (var i = 0, len = element_obj.length; i < len; i++) {
 5 //获得图片相对document的距上距离
 6         var t_index = getElementViewTop(element_obj[i]);     
 7         if (t_index - getScrollTop() < innerHeight) {
 8             element_obj[i].src = element_obj[i].getAttribute("lazy-src");
 9             delete element_obj[i];
10             download_count--;
11         }
12     }
13 }                    

3.滚动的时候触发事件，1000毫秒后执行lazy（）方法。

1 window.onscroll = window.onload = function () {
2     setTimeout(function () {
3         lazy();
4     }, 1000)
5 }    

整部分代码位于闭包自执行函数中。相应的方法放在init中。

1 var lazyLoad = (function () {  
2     function init() {
3         initElementMap();
4         lazy();
5     };
6     return {
7         init: init    
8     }
9 })();    

 

　　

 使用格式 ：src填默认loading图片地址，真实的图片地址填在lazy-src属性里，切记需指定宽高。在外部调用  lazyLoad.init();

 所有的代码以及例子已经上传到github上了，地址是： https://github.com/beidan/lazeLoadImg，欢迎star