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

Apply code to dynamically loaded image

本文关键字：图像 加载 动态 代码 应用于      更新时间：2023-09-26

我有一个页面，其中图像与包装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')时，控制台显示正确的对象。

我怎么能运行我的myCallback函数后的动态内容与图像准备一些DOM脚本操作?

如果您无法访问AJAX请求回调，那么您的选项仅限于setInterval()计时器，该计时器检查是否添加了元素，MutationObserver或img元素上的load事件-但请注意，这只会在图像的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 });

不是正确的方法，但是你可以试试这个

var handle = setInterval(showImage, 500);
function showImage(e) {
    var img = $('#spot').find("img");
    if(img != undefined) {
         if($(img).is(":visible")) {
              clearInterval(handle);
              handle = 0;
              // your logic
         }
    }
}
相关文章：