Javascript userscript-截取图像URL并提供不同的图像

我正在编写一个用户脚本，它将在我访问JIRA服务器时运行。它将用我们公司ID徽章照片商店的图像为用户交换头像图像。通过这种方式，整个组织不需要将他们的图像分别上传到JIRA服务器上，以便用户图标易于识别。我可以使用jQuery更改已经渲染到DOM中的图像的“src”属性。然而，JIRA页面将动态内容加载到div等中，因此我想知道是否有一种方法可以附加一个事件处理程序，该事件处理程序在浏览器试图获取图像时触发，并从公司服务器提供不同的图像。img标记包含正确映射图像所需的数据属性。我只是不知道该参加什么活动

我能找到的最接近的例子是“暴躁猫”（从这里登陆），但Mobify似乎不再被维护。解决这个用例的当前选项是什么

谢谢

您可以使用深层（子树）MutationObserver来监视添加到DOM中的元素。每当添加一个元素时，查看该元素及其子元素的

{
for（突变常数{addedNodes}）{
for（常数ADDENDNODE/ADDENDNODE）{
如果（addedNode.nodeType！==1）继续；
常量imgs=addedNode.queryselectoral（'img'）；
用于（img的常量img）{
变换（img）；
}
如果（addedNode.tagName=='IMG'）{
变换（加法节点）；
}
}
}
})
.observe（document.body，{childList:true，subtree:true}）；
设置超时（（）=>{
document.body.innerHTML+=''；
});
$（'body'）。在（'load'，'img'，function（）{/*此处的逻辑*/}）
不起作用？不起作用。我在函数体中放了一个console.log，消息没有显示在控制台中。太好了，这很有效！它会生成数百个事件——考虑到userscript的范围，这并不是什么大问题，但我想知道是否有办法对此进行优化。是否可以连接到浏览器的http加载方法并截取/转换图像URL？这样，我的代码将只执行一系列次，而不是针对添加到DOM中的每个元素运行。如果不亲自修补浏览器内部，这是不可能的-可能有扩展，但不可能有用户脚本。是的，子树观察者很慢。如果需要，您可以使用100ms
setTimeout
或类似的方法，但不需要的图像会在被替换之前进行下载初始化。可能有一种方法可以用于在网络级别而不是在客户端Javascript级别替换URL。