预加载和懒加载

懒加载

通过监听scroll事件，判断图片进入可视区域之后请求图片资源

对于电商等图片很多，页面很长的业务场景适用

减少无效资源的加载

并发加载的资源过多会阻塞js的加载，影响网站的正常使用

可以使用原生js或者引用zepto.min.js

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)

预加载 

  图片等静态资源在使用之前的提前请求

资源使用到时能从缓存中加载，提升用户体验

页面展示的依赖关系维护

使用方法：

1）、img  设置display：none 

2）、var image =  new Image()

image.src = ""

3)、可以使用xmlhttpRequest  不过会涉及到跨域问题  优点就是更加方便操控预加载图片

4）、可以使用preload.js