javascript - 检测正在加载到 DOM 中的新图像，jQuery 加载事件处理程序不会触发

Question

我正在开发一个用户脚本，可以对图像执行各种操作。

问题是，有时图像会在初始加载后添加到页面，并且这些图像不会由我的用户脚本处理。

我需要一些 javascript/jQuery 代码，每次新图像加载到浏览器中时，它都会自动运行一个函数。

这是我尝试过的:

$('img').on('load', function() {
    handleImgTag();
});

这不起作用。当新图像添加到页面时(我使用 chat.stackoverflow.com 作为测试，并发送一条新消息，这意味着我的个人资料图片再次添加到页面，而我的代码未处理该图像)已处理，但没有任何反应。

我尝试四处搜索，但似乎找不到方法来做到这一点，也许是因为搜索词不好？

是否有一个事件或其他东西可以在Tampermonkey 用户脚本中使用，当新图像添加到用户所在的页面时，该脚本将运行一个函数？

编辑:

我不同意提到的重复项，因为这是专门关于图像的，并且在 Tampermonkey 用户脚本中使用。此外，重复项已有 5-8 年历史，可能无法反射(reflect)最佳实践或当前技术。

Answer 1

$('img').on('load',...不起作用，因为它将匿名事件处理程序垃圾邮件发送到所有现有图像上。它们永远不会附加到 future 的 AJAX/动态插入图像。

正确的形式是:$('body').on ('load', 'img', handleImgTag); ，除了 load events do not bubble .

因此，您必须使用:链接问题中的技术(主要是 MutationObserver )，或者类似 waitForKeyElements() 的技术.
并且，您必须动态附加加载事件(对于缓慢加载图像)。

以下完整的工作脚本说明了该过程。请注意waitForKeyElements每个 <img> 都会触发一次无论是静态加载还是动态加载。 :

// ==UserScript==
// @name     _Process select images on or after load
// @match    *://chat.stackoverflow.com/rooms/*
// @match    *://chat.stackexchange.com/rooms/*
// @match    *://chat.meta.stackexchange.com/rooms/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements ("#chat img", loadHandling);

function loadHandling (jNode) {
    if (jNode[0].complete) {
        handleImgTag (jNode);
    }
    else {
        jNode.on ('load', handleImgTag);
    }
}
function handleImgTag (jNodeOrEvent) {
    var newImg;  //  will be jQuery node
    if (jNodeOrEvent instanceof jQuery) {
        newImg = jNodeOrEvent;
    }
    else {
        newImg = $(jNodeOrEvent.target);
    }
    console.log ("Found new image with width ", newImg.width () );
}

<小时/>

注意:建议调整传递给 waitForKeyElements 的 jQuery 选择器，以尽可能合理地缩小目标图像的范围。