防止从脚本加载图像答案

【问题标题】：Preventing images from loading from script防止从脚本加载图像
【发布时间】：2015-10-09 10:23:49
【问题描述】：

我的一些图片标签有点问题。我们有一个返回一堆 HTML 的服务（旧版）。此处的图像标签在其 HTML 中包含相对路径，这是相对于错误的基础。解决这个问题对我来说很简单——只需将它放入一个 div 中，选择图像，然后修改它们的 URL。

问题在于，一旦您将该 HTML 放入 div 中，浏览器就会请求错误的 URL。所以控制台卡住了图像的 404 警告，即使将它们放在 div 中的全部目的是为了纠正问题。

我已经看到您可以使用 noscript 标记阻止图像加载。不幸的是，当用 noscript 替换 div 时，我们遇到了一个相当大的问题——从 script 中操作 noscript 标签似乎非常困难。本机函数（在 Chrome 中）似乎返回完全不同的结果。例如，当我们尝试设置 noscript 的内部 HTML 时，它似乎认为我们实际上是要将该 HTML 设置为文本。

在我修复它们之前，如何防止图像标签加载它们的 URL？

编辑：我将 HTML 作为来自 AJAX 请求的字符串返回。

【问题讨论】：

你如何将 HTML 放入 div 中？服务器端的动态 HTML 生成？ AJAX 然后 JS 插入？在这两种情况下，是什么阻止了您在插入 HTML 之前对其进行操作？
@Shilly 我不认为这是正确的 - 我已经看到浏览器只需通过创建 Image 对象并设置其 src 属性来触发加载，而无需向 DOM 添加任何内容。事实上，这是大多数“图像预加载”脚本背后的全部前提。
哦，刚刚在控制台中测试过，你是对的。创建和图像标签并使用 setAttribute 更改 src 将自动下载 src，我还不知道，谢谢！我会删除我的回复。编辑：猜测一种解决方法是将html作为文本/纯文本下载并操作字符串。
@Amadan：没什么。问题是你不需要插入它来触发 404，只要它是任何类型的元素你就会得到 404。并且将 HTML 作为原始字符串操作并不是特别简单。
我可以，但你是认真建议我用 JavaScript 实现 HTML 解析器吗？

标签： javascript html noscript

【解决方案1】：

这可能/可能无法解决您的特定问题，因为我没有任何代码可以评估。此方法已在 Chrome/Edge/FF 上成功测试（无控制台错误）。

根据您使用 AJAX 的编辑，使用脚本添加 html 字符串：

var el = document.createElement("DIV");
el.innerHTML = '<img src="wrong_path.jpg" />';
var imgs = el.getElementsByTagName("IMG");
imgs[0].src = "http://placehold.it/350x150";
document.body.appendChild(el);

另一种可能解决此问题的方法是 DOM 解析器，将字符串转换为 HTML，迭代图像并更新它们的“src”并返回要插入现有 DOM 的 DOM 子集。

源：https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

如果需要捕获插入以手动检查插入的元素，可以使用 DOM 节点插入：

源：https://stackoverflow.com/a/18152595/2827823

document.body.addEventListener("DOMNodeInserted", function (evt) {
    if (evt.target.tagName == "IMG") {        
        evt.target.src = "http://placehold.it/350x150";
    }
});

document.body.innerHTML = '<img id="foo" src="wrong_path_bar.png"/>';

如果需要在不手动查找的情况下捕获这些生成的错误，可以使用错误事件处理程序：

源：Alter the prototype of an image tag?

window.addEventListener("error", function(e) {
    if ( e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img" ) {
        // Bad image src
        // e.target.src = "Do an url replacement";
    }
}, true);

【讨论】：