前言
在一个应用中，通常会有很多图片，众所周知，加载图片需要时间，在图片没有加载出来之前，页面会是空白，为了提升用户体验，应用的开发人员使出浑身解数，其中最为常见的就是在图片没有加载完成之前，有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难，当给一个Image对象设置src属性后，图片就开始加载。给Image对象指定事件要位于设置src属性之前。
涉及到的内容
1.需要预加载的图片并不仅仅只是一张，通常将所有图片的信息保存在一个数组或者对象中，为了加载所有的图片，需要遍历出所有的图片。
2.当所有图片加载完后，又要接着执行其他的任务，这需要一个回调函数。
3.记录已经完成加载的图片数量，并实时的反应到页面上。
编码开始
注：html和css省略，主要讲解js文件
1.为了代码复用，我将图片预加载相关的代码封装在imageloader.js模块中，并暴露出一个接口。
2.入口文件是index.js，入口文件的代码如下：
var loadImage = require('./imageloader.js');
loadImage(['./img/rabbit-big.png','./img/face_slogan.png','./img/footer.png'],finish);
//finish是一个所以图片完成加载之后执行的回调函数
function finish(){
document.body.innerHTML = '完成加载'
}
3.imageloader.js模块代码入下：
'use strict';
/**
* 预加载图片的函数
* @param elem 显示加载进度的元素
* @param images 加载图片的数组或者对象
* @param callback 全部图片加载完毕后调用的回调函数
* @param timeout 加载超时的时长
*/
function loadImage(elem,images,callback,timeout){
//遍历出图片的计数器
var count = 0;
//默认全部图片都能成功加载
var success = true;
//超时timer的id
var timerId = 0;
//默认不会加载超时
var isTimeout = false;
//已经加载完成的长度
var loaded = 0;
//对图片数组（或对象）进行遍历
for(var key in images){
//过滤掉prototype上的属性
if(!images.hasOwnProperty(key)){
continue;
}
//获得每个图片元素
//期望每个图片元素是一个object：{src:XXX}
var item = images[key];
if(typeof item === "string"){
item = images[key] = {
src:item
}
}
//如果格式不满足期望，则进行下一次遍历
if(!item || !item.src){
continue;
}
//计算+1
++ count;
//设置图片元素的id
item.id = '__img__' + key + getId();
//设置图片元素的image，它是一个image对象
item.image = window[item.id] = new Image();
doLoad(item);
}
//如果计数为0，则直接调用callback
if(!count){
callback(success);
}else if(timeout){//如果设置了最长加载时间
timerId = setTimeout(onTimeout,timeout)
}
/**
* 真正进行图片预加载的函数
* @param item 图片元素的对象
*/
function doLoad(item){
item.state = 'loading';
var img = item.image;
//图片加载成功的一个回调函数
img.onload = function(){
//只要有一张出现加载失败，success就会为false
success = success & true;
item.state = 'load';
loaded ++;
done();
};
//图片加载失败的回调函数
img.onerror = function(){
success = false;
item.state = 'error';
loaded ++;
done();
};
//加载图片
img.src = item.src;
/**
* 每张图片加载完成的回调函数，不论成功还是失败
*/
function done(){
//清除绑定的事件
img.onload = null;
img.onerror = null;
try{
delete window[item.id]
}catch (e){
}
elem.innerHTML = '已加载' + (loaded / count * 100) + '%';
//当所有图片加载完成并且没有超时的情况，清除定时器，且执行回调函数
if(count === loaded && !isTimeout){
clearTimeout(timerId);
callback(success);
}
}
}
/**
* 超时函数
*/
function onTimeout(){
isTimeout = true;
success = false;
callback(success);
}
}
var __id = 0;
function getId(){
return ++ __id;
}
module.exports = loadImage;
4.我使用的是webpack进行打包，如果你对打包还不熟悉，可以点击这儿学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 理解Javascript图片预加载
- 多种js图片预加载实现方式分享
- 基于javascript实现图片预加载
- JS实现图片预加载无需等待
- js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
- javascript预加载图片、css、js的方法示例介绍
- 纯JS图片批量预加载技术代码
- js 利用image对象实现图片的预加载提高访问速度
- javascript 也来玩玩图片预加载
- 利用CSS、JavaScript及Ajax实现高效的图片预加载
