1.什么是预加载
将所有的图片内容请求下来,送到页面中
2.预加载作用
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览网站内容时获得更好的用户体验。
3.预加载的封装
function loading(obj) {
var data = obj.data;
var progressFun = obj.progress;
var doneFun = obj.done;
// 记录图片总个数
var allCount = 0;
for (var key in data) {
allCount++;
}
// 创建数组,用于存放所有加载好的图片对象
var imgsObj = {};
// 遍历对象
for (var key in data) {
var value = data[key];
// 创建Image对象
var img = new Image();
img.src = value;
// 不能直接使用.的方式添加属性,因为那样无法替换key的值
imgsObj[key] = img;
// 记录完成加载的图片的个数
var doneCount = 0;
img.onload = function () {
doneCount++;
// 计算当前的进度
var v = doneCount / allCount * 100;
if (progressFun) {
progressFun(v);
}
// 如果全部加载完成,则需要进行回调
if (doneCount == allCount) {
if (doneFun) {
doneFun(imgsObj);
}
}
}
}
}