懒加载

认识

懒加载是一种按需延迟资源的方式。在加载显示页面时，并不一次性加载所有该页面所需要的图像，对于在可视区域之外的图像，可以等到用户scroll到该区域的时候，再进行加载

实现方式

1、目前已经有很多库实现了懒加载，例如lazysizes，可以考虑使用

2、使用库这样的操作，相当于增加一个需要请求的js文件，增加一次http请求。所以如果能够实现原生的懒加载，能够更好的优化性能；

原生js实现图片懒加载

原理：

1. 页面上图片的src属性设置为空字符串；（也可以设置为一个占位位图）
2. 将真实路径存放在data-original属性中；（以data-开头的html5属性，original可以自定义）
3. 监听scroll事件，scroll回调函数中判断懒加载图片位置是否进入可视区域。如果是，则将data-original属性值赋值给src属性

代码

　　

var viewHeight = document.documentElement.clientHeight; //可视区高
function lazyLoad() {
    var eles = document.querySelectorAll('img[data-original][lazyload]')
    Array.prototype.forEach.call(eles, function (item, index) {
        var rect;
        if (item.dataset.original === "")
            return;
        rect = item.getBoundingClientRect();
        if (rect.bottom >= 0 && rect.top < viewHeight) {
            ! function () {
                var img = new Image();
                img.src = item.dataset.original;//提前缓存图片
                img.onload = function () {
                    item.src = img.src;
                }
                item.removeAttribute("data-original");
                item.removeAttribute("lazyload");

            }()
        }
    });
}
lazyLoad()
document.addEventListener("scroll", lazyLoad)

 

预加载