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

Fastest way to fire javascript after an image has been loaded?

本文关键字：方法 javascript 图像 加载      更新时间：2023-09-26

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

如果我立即触发它（在$(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。

为什么不简单地使用图像的onload函数：

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

一旦图像加载，它将触发..

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

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

我正在使用以下内容：

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

创建一个标签，将一次性加载处理程序附加到它，然后才告诉它 src url 是什么。

另一种方法是：

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

这里的想法是，链接确保如果照片在缓存中并且加载处理程序附加得太晚而无法捕获它，则 each（this.complete） 部分将节省一天并触发加载。

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

相关文章：