总结下,大概是这样的逻辑
预加载图片流程
由定义在proptotype上的LoadImage方法把数组交给真正去加载图片的组件模块。该数组为[{src:'imageurl'}] 这样的格式。
经由该模块之后,会返回一个数组,其中标志了哪些图片加载成功,哪些没有。为了这样做的话,就需要给图片分别加一个对应ID。
在这个模块中,会将数组中的对象遍历取出来加载。为了这样做,需要先排除错误数据,。不存在可以遍历的对象,该对象不存在src,以及在Prototype上的属性,如果是string的话,做类型转换成Object。
遍历是用for in 语句。
for (var key in images) {}
在真正的加载过程中,首先要新建Image对象。将其绑定到window上。像前面说的,为Image加上ID,同时数据中的对象也要保存这个ID。
设置onload, onerror的处理后,设置Image对象的src,就会加载了。
而为了全部加载成功之后之后调用callback回调函数,需要进行计数和确定完成的方法。
在这里是遍历的时候count ++ ,每次加载完成,无论失败与否,都会 --count ,
当然失败与否在该对象上进行的标记不同,这里用
status 为loaded 作为成功。status 为error作为失败
最后当没有图片可以加载 的时候,就可以加载回调函数了。
当然还有对加载超时的优化。
这里我觉得比较特别的是,并没有用var timer 而用了 timoutId 这个变量设置setTimeout
这里分为两种情况,所以最开始也设置了一个局部变量作为成功或者失败的标志位。var success
如果加载成功,那么success为true, clearTimeout
如果所有的遍历和加载都完成了,而且success == false 的情况,当然就是setTimeout了