防止图像加载到非DOM jQuery AJAX解析

我正在使用jQuery ajax请求来获取和解析辅助页面上的HTML ..看看Chrome和FF的网络面板，我注意到它也将从那里加载图像 – 但只有当我加载结果时在’success’回调中使用$（data）。

内容没有加载到当前页面的DOM中，所以我真的很困惑为什么会发生这种情况。

但无论如何，简单地问，是否有办法防止这种情况发生？ 我需要从结果中获取信息，但它从不会击中主DOM。 脚本会阻止图像加载，直到查看在这里工作，或者从不会对加载的元素触发？ 请注意，这是针对用户脚本的应用程序，因此我无法完全控制目标HTML。

谢谢！

Answer 1

发生这种情况的原因是，只要您创建具有src属性的图像，就会加载该图像。 例如：

 var image = document.createElement('img'); image.src = 'example.png'; 

在将图像附加到DOM之前，浏览器会立即加载该图像。 这实际上通常是一种优化。 例如，它可用于预加载稍后将使用的图像。

由于jQuery将HTML字符串构建为DOM结构，因此它以与上述代码片段相同的方式创建img元素。 当图像元素出现时，即使在将其附加到DOM之前，也会从服务器加载文件。

最简单的解决方案是在添加之前从HTML中删除所有img标记：

 html = html.replace(/]*>/ig, ''); 

如果这不是一个选项，并且您需要img元素，则可以将src属性重命名为其他属性，或者如果不需要则删除属性。

Answer 2

在将其加载到DOM之前，您可以从返回的字符串中查找并删除所有图像标记。

这是HTML图像的正则表达式：

 <[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:)* 

Answer 3

您的问题是将响应文本加载到jQuery元素（ $(data) ）。 这实际上为加载的内容创建了一个DOM，即使您没有将其添加到“主”DOM。

您应该尝试做的是将此文本保留在jQuery之外，并使用regex在文本级别处理它，或者将其加载到XML文档中并使用各种可用的XML方法进行查询。

如果你想使用jQuery并停止加载你可以尝试在这里阅读： Javascript：取消/停止图像请求