js图片懒加载

转载地址

http://hjingren.cn/2017/06/09/js%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/

懒加载的意义

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数，对服务器缓压。

预加载:提前加载好，缓存到本地，当需要的时候直接读取缓存，对服务器增压

懒加载实现方式

第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟

第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载

第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片

Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制

1、懒加载HTML约定

我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。

具体示例为：

1

2、懒加载JavaScript实现

动态加载总共分为以下几个步骤:

1、添加页面滚动监听事件

window.addEventListener('scroll', _delay,false);

function_delay(){

     clearTimeout(delay);

     delay = setTimeout(function(){

             _loadImage();

       }, time);

}

2、当触发监听事件时会执行 _loadImage 函数，该函数负责加载图片

function_loadImage(){

   for(vari = imgList.length; i--;) {

        varel = imgList[i];

        if(_isShow(el)) {

            el.src = el.getAttribute('data-src');

            el.className = el.className.replace(newRegExp("(\\s|^)"+ _selector.substring(1, _selector.length) +"(\\s|$)")," ");

             imgList.splice(i,1);

         }

     }

}

3、判断该图片是否在当前窗口的可视区域内

function_isShow(el){

    varcoords = el.getBoundingClientRect();

     return( (coords.top >=0&& coords.left >=0&& coords.top) <= (window.innerHeight  ||document.documentElement.clientHeight) +parseInt(offset));

}

到这一个简单的图片懒加载就写成了

当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。