Question

我有一个html字符串，其中包含一些图像。我想呈现该html，但不加载图像（这里将有一些延迟加载）。为此，我从字符串创建一个jquery对象并替换src属性：

var html = $('<div>').html(string)
html.find('img').attr('src', 'placeholder.jpg')

问题是，当我查看页面上正在加载的内容时，当我调用.html(string)时可以看到图像已加载。仅当我将代码实际放入DOM时，才不会发生这种情况吗？如果没有，是否还有其他方法可以解析我的html并替换每个src标签中的<img>属性？

var string = '<div><span>lorem ipsum</span><img src="http://placekitten.com/640/480"/></div>'
var html = $('<div>').html(string)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 1

如here所述， “如果将字符串作为参数传递给$（），则jQuery会检查该字符串以查看它是否看起来像HTML（即，以开头）。否则，该字符串将被解释为选择器表达式，如上所述。但是如果该字符串似乎是HTML代码段，则jQuery尝试创建HTML所描述的新DOM元素。”

因此它实际上创建了一个DOM元素，这就是为什么它开始加载图像的原因。在创建jQuery对象之前，请尝试在HTML字符串上使用正则表达式来查找src属性。

您可以尝试使用(?<=src=)("[\w\.\/]+")之类的方法。对其进行改进以满足您的要求。

Answer 2

这样，您可以删除图像，但是我不确定您愿意做什么。如果您只想替换src，或者您只需要删除标签并保留图片的网址。

$("img").removeAttr("src");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>lorem ipsum</span>
  <img src="http://placekitten.com/640/480" width="200" />
</div>

在jquery对象创建时加载的图像

2 个答案: