图片预加载模块

前言

在一个应用中，通常会有很多图片，众所周知，加载图片需要时间，在图片没有加载出来之前，页面会是空白，为了提升用户体验，应用的开发人员使出浑身解数，其中最为常见的就是在图片没有加载完成之前，有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难，当给一个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 = '完成加载'  }

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：图片预加载模块

关键词：图片