jquery - jQuery加载带有图像的HTML将错误呈现到控制台

Question

当我尝试加载简单的 html 片段（带有一些图像，但现在无法访问）时，jQuery 出于某种原因尝试加载它们，并在控制台中产生错误。

这是示例代码：

var html = $('<div>' + '<img src="http://not.found/1.jpg"/>' + '</div>');

这是错误：

GET http://not.found/1.jpg  jquery-2.0.3.js:5788
x.extend.buildFragment jquery-2.0.3.js:5788
x.extend.parseHTML jquery-2.0.3.js:493
x.fn.x.init jquery-2.0.3.js:127
x jquery-2.0.3.js:63
(anonymous function)
InjectedScript._evaluateOn

如何防止 jQuery 尝试从 html 加载图像？

Answer 1

它是用于解析 HTML 的文档片段的“功能”。您需要实现（或使用）另一个解析器，而不是 jQuery。

由于加载失败（Chrome 28），这两个代码示例都会生成错误消息。

(function () {
    var docFragment = document.createDocumentFragment();
    var img = document.createElement("img");
    img.src = "http://not.found/1.jpg";
    docFragment.appendChild(img);
}());

(function () {
    var docFragment = document.createDocumentFragment();
    var div = document.createElement("div");
    docFragment.appendChild(div);
    div.innerHTML = '<img src="http://not.found/1.jpg"/>';
}());

PS：Trick withinsertAdjacentHTML也一样

Answer 2

jQuery - 是 DOM 操纵器，但不是 HTML 字符串解析器。

为了执行任何操作，jQuery 总是将传递的字符串转换为 DOM，从而触发图像下载。

您应该查看纯 HTML 字符串解析器并且不需要转换为 DOM 的库。

例如http://ejohn.org/blog/pure-javascript-html-parser/（来自 John Resig）或https://npmjs.org/package/htmlparser

Answer 3

那这个呢：

1. 使用 var 存储 src 并为图像分配 id

   var src="http://not.found/1.jpg";

2. 创建你的 html 变量

   var html = $('<div>' + '<img id="imgid" />' + '</div>');

3. 将属性 scr 添加到图像

   jQuery("#imgid").attr('src',src );