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

【问题标题】：Apply code to dynamically loaded image将代码应用于动态加载的图像
【发布时间】：2016-09-16 08:40:08
【问题描述】：

我有一个页面，其中通过 ajax 加载带有包装 div 的图像。加载该图像时，我需要应用一些代码。 我无法更改 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 函数？

【问题讨论】：

不会为 div 元素引发 load 事件。为什么不能修改 AJAX 请求？ far 是这里最简单优雅的解决方案。我想你可以使用 MutationObserver，但它们在旧浏览器中并没有得到很好的支持。您需要申请什么代码？如果是事件处理程序，您可以委托它们。
@RoryMcCrossan ajax 调用是第 3 方，所以我无法更改它。我需要动态删除图像的链接并改为应用图像映射，这就是我在myCallback 中所做的并且实际上正在工作，但只有在图像存在之后立即调用它。
但是第三方 AJAX 调用肯定有你可以使用的回调...？
@RoryMcCrossan 假设我无法连接到 ajax 调用。告诉我使用我没有的东西是没有帮助的。
好吧，您的解决方法是在 AJAX 请求加载的 img 元素上使用 setInterval 计时器、MutationObesrver 或 load 事件处理程序（尽管这只会在 之后触发 图像加载，而不是在元素添加到 DOM 时加载，因此会有延迟）。这些都不理想，也不优雅。我建议您花更多时间研究如何访问回调。从长远来看，这是值得的。

标签： javascript jquery ajax

【解决方案1】：

如果您无法访问 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 });

【讨论】：

【解决方案2】：

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

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

【讨论】：