Question

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

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

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

由于

Answer 1

您可以使用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的特定类型的搜索可能无法以完全相同的方式工作。

Answer 2

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

因此，如果您想在不加载图像的情况下对此HTML运行选择器操作，您可以选择以下几种方法：

在将HTML提供给jQuery之前修改图片代码，以便他们的.src属性消失或为空，或<img>代码不是图片代码或不再存在。
使用除此类jQuery之外的其他内容来解析HTML，以便为选择器操作做好准备。

如果您更多地披露了为什么要尝试这样做或者您正在尝试使用选择器操作，我们可能会提出更多选择。

Answer 3

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

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

然后你可以在需要的时候用data-src替换src属性。像这样的东西

$('#imgid').attr('src',$('#imgid').attr('data-src'));

Answer 4

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

var doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = htmlString;

在不请求图像的情况下将HTML字符串加载到jQuery中

4 个答案: