带有 src 的 DOM img 节点不加载图像

Question

我在未添加到实际页面的 DOM 树中的 DOM 元素上使用 jQuery 来呈现一些 HTML 并将其作为字符串获取。

最小的例子只是评估：

$('<div><img src="foo.png"></div>').html()

不幸的是，这会导致浏览器尝试加载图像。

如何防止这种情况发生？

这是在 Chrome 应用程序的上下文中，因此特定于 chrome 的解决方案是可以接受的。

在我的用例中，简单地避免使用 DOM 元素不是一种选择：在实际代码中，现有的模板机制使用 DOM 元素和 jQuery 来组装输出。同样，我不能简单地将src 替换为data-src。

Answer 1

你可以使用 DOMParser

var parser = new DOMParser();
var doc = parser.parseFromString('<div><img src="foo4.png"></div>', 'text/html');

如果你需要用它做点什么，html 在doc.body.innerHTML 中