学习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 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
js日期相关函数总结分享
Oct 15 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
vuex入门最详细整理
Mar 04 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 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开发微信支付获取用户地址
2015/10/04 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python构建网页爬虫原理分析
2017/12/19 Python
django静态文件加载的方法
2018/05/20 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
python常量折叠基础知识点讲解
2021/02/28 Python
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
建房协议书
2014/04/11 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
英语辞职信怎么写
2015/02/28 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
活动宣传稿范文
2015/07/23 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python