JavaScript实现图片预加载时设置img的src属性和onload事件的位置前后顺序关系

JavaScript实现图片预加载时

img.onload=function(){};
img.src=xxx;//放在以上语句之后

需要明确以下几点

• 图片加载完成时，触发onload事件；
• JavaScript：同步执行；
• 加载图片：异步执行；

• 浏览器第一次加载图片
  • 若先给设置src属性，浏览器执行完赋值src的语句后开始异步加载图片（这个过程是很慢的）
  • 此时程序已经同步执行完赋值语句，不会等待是否加载完再执行下一条语句而是直接继续执行：开始给onload函数赋值（赋值这个事件相对于从网上加载图片的时间是很短的），赋值完成的onload函数就可以执行了
• 假设有缓存
  • 当执行完src的赋值语句后浏览器瞬间加载完图片（很可能加载过程的时间很短，这个速度快到程序还没有执行到onload的赋值语句），此时onload事件被触发
  • 当加载完时onload事件还没有绑定（给onload事件赋值），所以执行onload事件函数时为空函数，什么都不执行。