学习JavaScript图片预加载模块


Posted in Javascript onNovember 07, 2016

前言

在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难,当给一个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 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 #Javascript
jquery html5 视频播放控制代码
Nov 06 #Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 #Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 #Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 #Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 #Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 #Javascript
You might like
php清除和销毁session的方法分析
2015/03/19 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
layui的select联动实现代码
2019/09/28 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
jupyter 导入csv文件方式
2020/04/21 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
高中生活自我鉴定
2014/01/18 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
搞笑创意广告语
2014/03/17 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
搬迁通知
2015/04/20 职场文书
爱心捐款活动总结
2015/05/09 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript