你的位置:首页 > Java教程

[Java教程]图片预加载模块


前言

在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画。这里用到的技术主要是图片预加载。图片预加载的原理并不难,当给一个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进行打包,如果你对打包还不熟悉,可以点击这儿