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

Posted 2023-05-09

【中文标题】防止图像在非 DOM jQuery AJAX 解析上加载

【英文标题】：Prevent images from loading on non-DOM jQuery AJAX parse

【发布时间】：2011-09-23 00:31:33

【问题描述】：

我正在使用 jQuery ajax 请求来抓取和解析辅助页面上的 html。 查看 Chrome 和 FF 的网络面板，我注意到它也会从那里加载图像——但只有当我在“成功”回调中使用 $(data) 加载结果时。

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

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

谢谢！

【参考方案1】：

发生这种情况的原因为什么是，一旦您创建了具有src 属性的图像，该图像就会被加载。例如：

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

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

由于 jQuery 将 HTML 字符串构建为 DOM 结构，它创建 img 元素的方式与上面的 sn-p 几乎相同。当图像元素出现时，甚至在它被附加到 DOM 之前，文件就会从服务器加载。

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

html = html.replace(/<img\b[^>]*>/ig, '');

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

【讨论】：

我喜欢这个解决方案；我能够很快地用另一个标识符替换“src”属性文本。

【参考方案2】：

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

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

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

【讨论】：

感谢您的回复...问题是我实际上需要那些图像标签（在其他标签中，不仅仅是那个）！更不用说字符串提取似乎非常密集和浪费。 .. 如果没有完全加载所有内容，真的没有办法在目标上使用 jQuery 吗？

【参考方案3】：

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

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

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

【讨论】：

我对 XML 解决方案很感兴趣。您有任何代码可以更好地解释这一点吗？与简单地通过 jQuery 传递经过清理的响应相比有什么好处吗？