懒加载
原理：通过页面加载开始，先给图片一个占位图，将实际图片属性，放在自定义属性data_url里面，通过onscroll事件，检测图片的位置，如果图片进入可视区域，将data_url的实际图片设置给src
检测方法：图片距离文档顶部距离-scrollTop < 浏览器可视区域高度延迟加载
// 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);
图片对象事件
img.onerror=function(){}图片对象加载失败后，自动调用
img.onload=function(){}图片对象加载成功后，自动调用资源预加载
// 降低服务器压力
// 资源预加载
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);
},
})
