javascript - 将代码应用于动态加载的图像

Question

我有一个页面，其中带有包装 div 的图像通过 ajax 加载。加载该图像时，我需要应用一些代码。 我不能改变 ajax 调用 所以我不能 只是在 ajax 调用上使用 on('success')。 一段时间后，带有 div 的图像以相同的方式重新加载(这是一种旋转)。

结构是这样的:

<div id="spot">
    <div id="xyz">
        <a href="http://someurl.com">
            <img src="http://someimage.url" />
        </a>
    </div>
</div>

“spot”div 是固定的，其中的所有内容都是动态加载的。

当我输入时

$('#xyz img').on('load', myCallback);

它不起作用，我想是因为当图像被重新加载时，监听器也被删除了。

我尝试使用委托(delegate)监听器:

$('#spot').on('load', '#xyz img', myCallback);

但也没有用，它没有被执行(我已经将 console.log 放入其中以验证发生了什么)。

当我在控制台中键入 $('#spot #xyz > img') 时，控制台会显示正确的对象。

如何在带有图像的动态内容准备好执行某些 DOM 脚本操作后立即运行我的 myCallback 函数？

Answer 1

如果您无法访问 AJAX 请求回调，那么您的选项仅限于 setInterval()检查元素是否已添加的计时器，MutationObserver 或 load img 上的事件元素 - 但请注意，这只会在 src 之后触发图片的部分已加载，因此会有延迟。

以下是使用 MutationObserver 的方法，但请注意，这仅适用于较新的浏览器:

var targetElement = document.querySelector('#container');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // perform the required actions here...
        console.log(mutation.type);
    });
});

observer.observe(targetElement, { attributes: true, childList: true, characterData: true });