10

有没有办法在不请求图像的情况下将包含图像标签的 HTML 字符串加载到 jQuery 中？我希望能够在 jQuery 对象上运行选择器以提取一些信息。举个例子：

var string = $('<p><img src="http://image.url/file.jpg" /></p>');
string.find('img');

浏览器将请求http://image.url/file.jpg。我正在尝试找到一种方法来做同样的事情，但没有浏览器请求图像。

谢谢

4

4 回答 4

5

您可以使用 XML 文档来执行搜索：

function searchXml(xmlStr, selector) {
    var parser, xmlDoc;
    if(window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(xmlStr, "text/xml");
    } else {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(xmlStr); 
    }
    return $(xmlDoc).find(selector);
}

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));​​​​

在行动中看到它：http: //jsfiddle.net/na9Tt/

请记住，它是 XML 文档，而不是 HTML 文档，因此某些特定于 HTML 的特定类型的搜索可能不会以完全相同的方式工作。

于 2012-06-12T23:29:37.503 回答
3

你需要清楚你的问题的界限。如果您的问题是：“有什么方法可以将确切的 HTML（不更改它）加载到 jQuery 对象中（就像您正在做的那样）而不会导致图像加载”，那么答案是否定的。jQuery 创建一个临时父对象并将您的 HTML 分配给 innerHTML 属性，这会导致浏览器完全解析将加载图像 URL 的此 HTML。

所以，如果你想在这个 HTML 上运行选择器操作而不加载图像，你有几个选择：

  1. 在将 HTML 提供给 jQuery 之前修改图像标签，使其.src属性消失或为空，或者<img>标签不是图像标签或不再存在。

  2. 使用这种类型的 jQuery 以外的东西来解析您的 HTML，以便为选择器操作做好准备。

如果您透露更多关于您为什么尝试这样做或您尝试对选择器操作做什么，我们可能会建议更多替代方案。

于 2012-06-12T23:24:51.090 回答
3

您可以将图像路径添加到另一个属性，如下所示

<img id="imgid" src="" data-src="/path_to_image">

然后您可以在需要时将 src 属性替换为 data-src 。像这样的东西

$('#imgid').attr('src',$('#imgid').attr('data-src'));
于 2012-06-12T23:27:49.373 回答
0

据我所知，这只是 Chrome，在这里找到的，如果字符串不是有效的 HTML，该页面上的第一种方法可能不起作用，第二种方法可以正常工作。不会创建对图像的请求，也不会尝试执行内联脚本（这非常适合我的用例 - Chrome 扩展后台任务）。

var doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = htmlString;
于 2014-09-17T11:33:38.117 回答