Javascript 加载稍后附加到DOM的图像的事件

我读过

我的情况与此类似：我有一个用可视化编辑器编辑的

标记。编辑器将修改此主体的innerHTML并触发事件

问题是我必须处理一个调整大小的逻辑。 中的当前调整大小逻辑是：

除了在拖放图像上没有触发更改事件外，这工作得非常好，但幸运的是触发了焦点事件。但是当事件被触发时，图像还没有加载，因此它没有调整到合适的大小

---

对于最近使用Js代码添加到DOM中的图像，监听图像加载的最佳方法是什么？我尝试使用

$（窗口）。加载（fn）

，但没有捕获任何内容。

您可以在添加图像元素时将adjustHeight函数绑定到图像元素的加载事件，如下所示

this.$body.on('keyup keydown paste change focus', function() {
    $(this).find('img').off('load', _this.adjustHeight).on('load', _this.adjustHeight);
    return _this.adjustHeight();
});

• $（this）

  与

  this.$body

  相同（但允许您在其当前持有者之外提取函数）

• .find（'img'）

  获取

  $（此）

  （因此在可编辑区域内）中的所有图像元素

• .off（'load'，u this.adjustHeight）

  从image元素中删除事件处理程序，如果不这样做，您可能会多次绑定函数，这也会导致调用函数的次数与调用次数相同，这很容易成为性能问题

• .on（'load'，u this.adjustHeight）

  将事件处理程序添加到image元素中，因此在图像被

  load

  ed时会调用它

---

我想到的是，您可能需要限制adjustHeight函数的调用频率，以防止在用户一次拖放大量图像时冻结浏览器（除非它不像我想象的那样昂贵）。但是，如果这确实是一个问题，那么您可能还必须使用其他解决方案来解决此问题。

遗憾的是，HTMLImageElement上的加载事件不会冒泡。那么，您不能在丢弃的图像上添加一个

load

侦听器吗？由于您知道已触发

焦点

，因此可以检查

正文

中的一个图像是否是新的（在

数据-

属性中放置一些标志），并添加一个

加载

侦听器。@Zeta最好编辑拖放代码，以便在创建

时，你

为load添加了一个
新事件
（称为
“image\u loaded”
），它确实会冒泡。不要只是将代码粘贴为答案，给出一点解释策略，我没有太多时间，但看到了一个潜在的解决方案，我想在忘记整个问题之前与大家分享。我用更多信息更新了答案。谢谢。实际上我发现了另一个问题。焦点事件是在img节点被附加到dom之前触发的：（因此它不能很好地工作（我试图使用此代码来解决此行为）：）。顺便说一下，我认为您的代码可能无法很好地处理缓存中已加载的图像，因为加载事件可能在设置事件侦听器之前触发
this.$body.on('keyup keydown paste change focus', function() {
    $(this).find('img').off('load', _this.adjustHeight).on('load', _this.adjustHeight);
    return _this.adjustHeight();
});