img.onload 思考

是这样的，今天群里基友发了张截图

Paste_Image.png Paste_Image.png

研究一下

1.页面渲染过程

这个标题下的内容很适合做这篇文章的导读

下面这张图是webkit渲染过程

Paste_Image.png Paste_Image.png

虽然是渲染过程，但能了解到图片资源的加载是浏览器通过图片加载器异步请求获取的。

2.代码执行情况

javascript是单线程序解释器，一定时间内只能执行一段代码。

• 同步执行的任务放到主线程按加入顺序执行
• 异步任务扔到任务队列，主线程执行完之后会从任务队列里按照先入先出的方式取任务(忽略些细节)

setTimeout和setInterval创建的都是异步任务，扔到任务队列，接受的第二个参数意思是再过多久取消等待状态。里面的定时/间歇回调执行的条件是

1⃣️ 主线程任务执行完毕
2⃣️ 任务队列里轮到你了:你前面没别人了 或者 你前面有人但是他条件不足 仍处于等待执行状态
3⃣️ 你的等待状态为 可以执行 了

有上述3个执行条件加上一些浏览器默认设置，比如最小设置时间数，立即执行的毫秒数不是0等限制和实现的不同，严格执行是个梦。
尤其是setInterval容易发生后一个调用在前一个调用结束前启动。
so 先改成标准的间歇使用方式。

var img = new Image();
var timesize = 20;
img.onload = function(){//事件注册程序扔到任务队列-DOM0级事件注册方法
    console.log("事件上钩了!图片已load:"+img.height)
}

function fixTimer () {
    if(!!!img.height){
        console.log("没买着继续排队")
        setTimeout(fixTimer,timesize);//扔到任务队列
    }else{
        console.log("买到啦回家!:"+img.height)
        console.log("定时器 done")
    }
}
img.src = "http://7jpswm.com1.z0.glb.clouddn.com/transitionSnip20160122_155.png"//ImageLoader-浏览器资源异步加载

setTimeout(fixTimer,timesize);//扔到任务队列

预测执行结果

读过红宝书的一定看到过这段话:

新图像元素不一定从添加到文档后才开始下载，只要设置了src属性就会开始下载

为什么？
因为src一旦设置，浏览器就把活抢走了，开始调用ImageLoader来加载图片，而且是浏览器行为
如代码所示
任务队列第一个是事件处理程序onload
任务队列第二个是定时任务setTimeout

当主线程没任务时 有三条时间线
1⃣️ javascript 主线程轮询任务队列过程:有没有可执行的 取决于 等待状态 解锁条件
2⃣️ ImageLoader 资源请求过程:时间取决于图片大小 网络状况
3⃣️ 图片资源下载完成的时间:决定解锁 事件处理程序的执行

第一种情况

• 主线程执行完
• 图片有点大 网还有点慢 还没请求到
• 事件处理程序 准备好了吗？no
• setTimeout 到时间了吗? yes 执行 获取到图片高度了吗 no 继续创建一个扔到队列
• 图片请求到了 也下载完了
• 事件处理程序 准备好了吗? yes 执行
• setTimetout 到时间了吗？yes 执行 获取到图片高度了吗 yes done

这种情况输出为

没买着继续排队
事件上钩了!图片已load
买到啦回家！

第二种情况

• 主线程执行完
• 图片小 网络快 一下就请求到 下载完了
• 事件处理程序 准备好了吗? yes 执行
• setTimetout 到时间了吗？yes 执行 获取到图片高度了吗 yes done

这种情况输出为

事件上钩了!图片已load
买到啦回家！

实际代码跑例

Paste_Image.png Paste_Image.png

第三种情况

• 主线程执行完
• 图片大 还没请求到
• 事件处理程序 准备好了吗? no 不执行
• setTimetout 到时间了吗？yes 执行 获取到图片高度了吗 no 继续排着
• 图片大 还没请求到
• 事件处理程序 准备好了吗? no 不执行
• 图片大 但是嘎嘣就请求到了
• setTimetout 到时间了吗？yes 执行 获取到图片高度了吗 yes 不用排了
• 事件处理程序 准备好了吗? yes 执行
  输出为

没买着继续排队
买到啦回家！
事件上钩了!图片已load

实际代码跑例 换了个大图

Paste_Image.png Paste_Image.png

这里面你还可以加入 图片大 请求到了 但是还没下载到的情况分析 请看下图

Paste_Image.png

只有content download才会触发通知事件

总结

其实还有几种情况 比如主线程存在阻塞、定时任务中存在同步阻塞等
不过 本篇想说明的是

由于代码运行环境的特殊性 忽略基本实现和协作实现 会造成遗漏或者不可预测的运行结果
比如这里
基本实现——浏览器内js的运行机制
协作实现——就是浏览器的资源加载器

补充

• 2016-11-14

图片下载时在没有禁用缓存或者没有加请求随机变量的情况下 会缓存。
当图片被缓存时是无法触发onload的。
这时候可以用img.complete来做图片准备好触发回调的逻辑。