创建jquery对象时加载的图像

Question

我有一个html字符串，其中包含一些图像。我想渲染那个html，但不加载图像(这里会有一些延迟加载(。为了实现这一点，我从字符串中创建了一个jquery对象，并替换src属性：

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

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

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

如前所述，如果将字符串作为参数传递给$((，jQuery会检查该字符串是否看起来像HTML(即以开头(。如果不是，则会将该字符串解释为选择器表达式，如上所述。但如果该字符串看起来是HTML片段，jQuery则会尝试创建HTML 所述的新DOM元素

所以它实际上创建了一个DOM元素，这就是它开始加载图像的原因。在创建jQuery对象之前，请尝试在HTML字符串上使用regex来查找src属性。

你可以试试(?<=src=)("[w./]+")。改进它以满足您的需求。

Answer 2

通过这种方式，您可以删除图像，但我还不确定您愿意做什么。如果你只想替换src，或者你只需要删除标签并保留图像的url。

$("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>