javascript - 加载图像后触发 JavaScript 的最快方法？

Question

我有一部分代码依赖于了解页面上图像的宽度。

如果我立即触发它(在 $(function(){ 的顶部)，它有时不起作用，因为图像尚未加载。

如果我使用 jquery(我已经将它用于页面上的其他内容)在 load() 上触发，它永远不会触发。可能是因为图像在 JS 执行之前就已加载，或者因为它已被缓存。

$('#photo').load(function(){
    alert('loaded');
});
//doesn't fire

如果我执行以下操作，它确实可以工作，但是在第二次获取图像时出现明显的延迟:

$('#photo').load(function(){
    alert('loaded');
});
$('#photo').attr('src',$('#photo').attr('src')+'?'+new Date().getTime());
//fires, but is slow

2016 年一定有一个很好的方法可以做到这一点吗？无论是在 jquery 还是 vanilla JS 中。

Answer 1

为什么不简单地使用图像的onLoad函数:

<img src="/path/to/image.jpg" onload="doStuff(this);" />

图像加载后就会触发..