Question

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

内容未加载到当前页面的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(/<img\b[^>]*>/ig, '');

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

Answer 2

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

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

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

Answer 3

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

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

如果您想使用jQuery并停止加载，可以尝试阅读：Javascript: Cancel/Stop Image Requests

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

3 个答案: