PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

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

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

    图片预加载时设置img的src属性和img的onload事件的位置前后顺序关系
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-5088-1.html
    相关热词搜索: