导读:今天在网上看了好多预加载的代码,发现套路就那几个,但是有一点不理解,就是大家都说要把img.src=XXX放在img.onload=function(){}这个语句...
今天在网上看了好多预加载的代码,发现套路就那几个,但是有一点不理解,就是大家都说要把img.src=XXX放在img.onload=function(){}这个语句后面,如图:
后来经过别人的讲解,说是js是同步执行的,但是加载图片的过程是异步的,当有缓存时很可能加载过程的时间很短,当加载完时onload事件还没有绑定,所以执行onload事件时就什么都不执行了。网上说的加载图片是异步的这个我开始不是很理解,后来自己又琢磨了好久才想通,我自己的理解大致如下:若先给设置src属性,第一次浏览器执行完赋值src的语句后就要去加载图片,这个过程是很慢的,而此时程序已经执行完赋值语句,就不会等待是否加载完再执行下一条语句而是直接继续执行,然后开始给onload赋值函数,而赋值这个事件相对于从网上加载图片的时间是很短的,所以就可以执行onload函数了。假设有缓存,当执行完src的赋值语句后浏览器瞬间加载完图片,这个速度快到程序还没有执行到onload的赋值语句,所以此时onload事件被触发但此时还没有给onload事件赋值赋值,所以执行onload函数时为空函数,什么都不执行。