为什么onload回调函数应该在给src赋值之前定义

问题：

在使用fileReader，Image时，经常看到一段这样的写法：

const image = new Image();
image.onload = function () { ...code }
image.src = "image.png";

我感觉这样写的代码看起来很不舒服，src在onload下赋值，如果onload的函数有点长的话，找src的值会比较累，于是在我自己使用Image类时，我习惯先给src赋值——问题出现了：onload回调函数有时不会被执行。

原因：

浏览器会缓存一些媒体类型（如：图片、音频、视频），当给src赋值后，由于浏览器缓存了访问的资源，资源可以直接被获取到，在onload回调函数被定义之前已经拿到了资源，那么在这之后定义的回调函数也不会被执行了。