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

我有一个页面,其中带有环绕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);

我认为这是行不通的,因为当图像重新加载时,侦听器也会被删除.

我尝试了委托侦听器：

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

但也不起作用,也无法执行(我将console.log放入其中以验证会发生什么).

当我输入控制台$(‘#spot #xyz> img’)时,控制台会显示正确的对象.

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

解决方法:

如果您无法访问AJAX请求回调,则您的选项将限于setInterval()计时器,该计时器检查是否已添加元素,MutationObserver或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 });