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

如前所述here， "If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with ). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML."

所以它实际上创建了一个 DOM 元素，这就是它开始加载图像的原因。在创建 jQuery 对象之前尝试在 HTML 字符串上使用正则表达式来查找 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>

jquery 对象创建时加载的图像

Images being loaded on jquery object creation

jquery

image

src