Question

我看过jquery: how to listen to the image loaded event of one container div?

我的情况类似：我有一个用可视化编辑器编辑的<body contentEditable="true"/>标签。编辑器会修改此主体的innerHTML，并触发事件。

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

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

这很好用，除了在拖放图像时不会触发更改事件，但幸运的是会触发焦点事件。但是当事件被触发时，图像仍未加载，因此它不会调整到合适的大小。

最近使用Js代码监听添加到DOM的图像的图像加载的最佳方法是什么？我尝试使用$(window).load(fn)但没有抓到任何东西。

Answer 1

你可以将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')获取$(this)内的所有图片元素（因此位于可编辑区域内）
.off('load', _this.adjustHeight)从图像元素中删除事件处理程序，如果没有这个，你可能会多次绑定该函数，这也会导致它被多次调用，这很容易成为性能问题
.on('load', _this.adjustHeight)将事件处理程序添加到图像元素中，因此当图像为load时，会调用此事件

我想到的是，您可能需要限制adjustHeight功能不要经常调用，以防止它在用户拖动大量图像时立即冻结您的浏览器（除非它不是昂贵的功能，我想它可能是）。但如果这确实成为一个问题，您可能还需要使用其他解决方案。

加载后来附加到DOM的图像的事件

1 个答案: