基于动画的图片预加载技术的可复用的对象

基于动画的图片预加载

1. 效果图实例：https://hswlian.github.io/JavaScript-blog/练习-js实现动画（组件化）/house.html 。
2. 为了使动画不卡顿，使用了图片预加载技术。
3. 暴露出动画的运动速度、动画容器的属性和属性值、图片资源的数组，以供下次的复用。

---

用法示例

1. 引入js文件：https://github.com/hswlian/JavaScript-blog/blob/master/练习-js实现动画（组件化）/moveHouse.js
2. 在html文件中创建容器。

 <img class="house" src="img/house1.png"/>

3. 在文件中添加js代码。

    (function(){
//新建动画资源的数组
      let imgArr = [];
      for(let i = 1;i <= 12;i++){
        imgArr[i-1] = 'img/house'+i+'.png';
      }

//创建名为move的预加载对象
      let move = new MoveHouse({
        domType : 'class',//html中容器属性类型
        bdbox : 'house',//容器属性对应的值
        //autoplay : false,
        speed : 100,//运动的速度
        imageArr : imgArr//动画资源的数组
      });
    })();