Question

使用jQuery从文本创建新的DOM元素。

示例：

jQuery('<div><img src="/some_image.gif"></img></div>');

执行此语句时，它会导致浏览器从服务器请求文件'some_img.gif'。

是否有办法执行此语句，以便可以从DOM遍历中使用生成的jQuery对象，但实际上并不会导致浏览器通过请求图像和其他引用内容来访问服务器？

示例：

var jquery_elememnts = jQuery('<div><img class="a_class" src="/some_image.gif"></img></div>');
var img_class = jquery_elememnts.find('img').attr('class');

我现在唯一的想法就是使用正则表达式从图像元素中删除所有'src'标签，以及在使用jQuery评估HTML之前触发浏览器请求的其他内容。

如何使用jQuery来评估HTML，而不会触发浏览器向服务器请求评估HTML中的引用内容？

谢谢！

Answer 1

如果你采用正则表达式方式，可能是一个简单的方法，如

    htmlString.replace(/[ ]src=/," data-src=");

会做这个工作吗？

所以不要寻找：

    jquery_elememnts.find('img').attr('src');

你必须寻找：

    jquery_elememnts.find('img').data('src');

Answer 2

这不可能是afaik。当浏览器加载HTML片段（例如包含img的片段，通过src引用另一个资源时），它会尝试获取它。

但是，如果您只需要获取class中的img属性，则可以使用$.parseXML()获取XMLDocument，然后process它来获取所需的属性。这样，HTML片段将永远不会被加载，因此将不会获取图像：

var jquery_elememnts = $.parseXML('<div><img class="a_class" src="http://4.bp.blogspot.com/-B6PMBqTyqpk/UC7syX2eRLI/AAAAAAAABL0/SEoLWoxgApo/s1600/google10.png"></img></div>');
var img = jquery_elememnts.getElementsByTagName("img")[0];
var img_class = img.getAttribute("class");

<强> DEMO

Answer 3

您可以在jQuery中使用parseXML。

var elements = jQuery.parseXML('<div><img class="a_class" src="/some_image.gif"></img></div>');
var img_class = $(elements).find('img').attr('class');
alert(img_class);

字符串应该是完美的XML。这是我用于类似目的的解决方法，但不知道这是否会解决您的问题。

Answer 4

var jquery_elememnts = (new DOMParser()).parseFromString('<div><img class="a_class" src="/some_image.gif"></img></div>', 'text/html'); 
var img_class = jQuery(jquery_elememnts).find('img').attr('class');

防止“jQuery（html）”触发浏览器请求图像和其他引用的内容

4 个答案: