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

Question

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

如果我立即将其触发（在$(function(){顶部$(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);" />

图片载入后就会触发..

Answer 2

加载图像后，您可以使用Unveil插件触发回调。 作为奖励，您还可以延迟加载！

$("img").unveil(200, function() {
  $(this).load(function() {
    // where you do your things... this = the image object
  });
});

Answer 3

我正在使用以下内容：

$('<img />').one('load', function() {
  // do stuff
}).attr('src', $('#photo').src);

创建一个标记，将一个onload处理程序附加到该标记，然后再告诉它src url是什么。

另一种方法是：

$('#photo').on("load",function(){
  // do stuff
}).each(function(){
  if(this.complete) {
    $(this).trigger('load');
  }
});

这里的想法是，链接可以确保如果照片在缓存中，并且onload处理程序的连接太晚而无法捕获，则each（this.complete）节将节省时间并触发onload。

这些符合您对fast的定义吗？