Javascript实现图片预加载【回调函数,多张图片】
? ? ? ? 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时,就需要考虑把这个功能封装为一个通用方法。
?
(1)下面为JS实现图片预加载方法loadImages():
?
images[src] = new Image();images[src].onload = function(){ if(++count >= imgNum){ callback(images); }}images[src].src = sources[src];
? ? ? ??原因:如果图片从缓存中加载,速度非常快以至于没来得及绑定事件就加载完毕,自然不会触发绑定事件。
?
(2)for...in循环 与 for循环的区别
? ? ? ? for循环用于迭代数组(array)
? ? ? ? for...in循环用于迭代对象(object, {})或者关联数组(hash array)