加载图像后最快的方式来激活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);" />

图像加载后会触发..

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处理程序附加得太晚而无法捕获它，则每个（this.complete）部分将节省一天并激活onload。

这些符合你对快速的定义吗？