前言在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难,当给一个Image ...
前言
在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难,当给一个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 = '完成加载' }
原标题:图片预加载模块
关键词:图片
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。