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

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

var string = $('

'); string.find('img');

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

谢谢

您可以使用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('

', 'img').attr('src'));​​​​

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

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

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

因此,如果要在不加载图像的情况下对此HTML运行选择器操作,您有以下几种选择:

  1. 在将HTML提供给jQuery之前修改图像标记,以便它们的.src属性消失或为空,或者标记不是图像标记或不再存在。

  2. 使用除此类型的jQuery之外的其他内容来解析HTML以准备选择器操作。

如果您再详细说明了为什么要尝试这样做或者您正在尝试使用选择器操作,我们可能会提出更多选择。

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

  

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

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

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

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