1. 懒加载

原理：通过页面加载开始，先给图片一个占位图，将实际图片属性，放在自定义属性data_url里面，通过onscroll事件，检测图片的位置，如果图片进入可视区域，将data_url的实际图片设置给src
检测方法：图片距离文档顶部距离-scrollTop < 浏览器可视区域高度

2. 延迟加载

 // options
    //  src图片路径
    //  loadsrc加载时候的路径
    //  errsrc 404时候的路径
    function delayLoadImg(options){
        // 设置loading图
        // 如果实参中有loadSrc 则执行实参
        // 如果没有，则执行默认路径
        options.imgs.src=options.loadSrc||'./img/loding.gif';
        // 创建一个临时图片的images对象
        var img =new Image();
        // 给临时图片设置真实的路径
        img.src=options.setSrc;
        // 给临时图片绑定onload事件
        img.onload=function(){
            // 将真实地址传给options中的images对象
            options.imgs.src=this.src;
        }
        // 如果加载失败，绑定onerror
        img.onerror=function(){
            // 配置一张404图片
            options.imgs.src=options.errSrc||'./img/404.jpeg';
        }
    }

    // 创建图片对象
    var img=new Image();
    // 调用预加载方法，实参是一个json
    delayLoadImg({
        imgs:img,
        setSrc:"http://placehold.it/380x300",
        // loadSrc:'',
        // errSrc:'',
    })  

    var box=document.getElementsByClassName('box')[0];
    box.appendChild(img);

3. 图片对象事件

img.onerror=function(){}图片对象加载失败后，自动调用
img.onload=function(){}图片对象加载成功后，自动调用

4. 资源预加载

 // 降低服务器压力

    // 资源预加载
    var arrImg = [
        'http://placehold.it/380x300',
        'http://placehold.it/380x300',
        'http://placehold.it/380x300',
        'http://placehold.it/380x300'
    ]
    function preLoad(opctions) {
        // 用来接收所有加载完毕的图片对象
        var imgObj = [];
        // 保存数据长度
        var total = opctions.data.length; 
        // 储存次数
        var cont = 0;
        // 遍历数据源，动态创建img对象
        for (var i = 0; i < total; i++) {
            var img = new Image();
            img.src = opctions.data[i];
            // 将已经数值好的img添加到imgobj中
            imgObj.push(img);
            img.onload = function () {
                // 计数器自增
                cont++;
                // 记录过程
                opctions.each(cont, total);
                // 判断是否结束
                if (cont == total) {
                    // 所有图片加载完毕
                    opctions.success(imgObj);
                }
            }
        }
    }
    preLoad({
        data: arrImg,
        // 记录图片加载过程
        each: function (cont, total) {
            console.log(cont, total);
        },
        success: function (res) {
            // 全部加载
            console.log(res);
        },
    })