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>

＆＃34; spot＆＃34; div是固定的，它内部的所有东西都是动态加载的。

当我放入

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

它不起作用，我认为因为当重新加载图像时，侦听器也会被删除。

我尝试了委托的监听器：

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

但也没有工作，它没有被执行（我已经把console.log放在里面来验证会发生什么）。

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

如何在图片的动态内容准备好进行某些DOM脚本操作后立即运行myCallback功能？

Answer 1

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

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
         }
    }
}

Answer 2

如果您无法访问AJAX请求回调，则您的选项仅限于.map-container { overflow: hidden; touch-action:none; // -ms-touch-action: none; }计时器，该计时器会检查是否已添加元素，MutationObserver或setInterval() load元素上的事件 - 但请注意，只有在img图像加载后才会触发，因此会有延迟。

以下是src的使用方法，但请注意，这只适用于较新的浏览器：

MutationObserver

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

2 个答案: