阻止非DOM的jQuery AJAX解析加载图像

Question

我正在使用jQuery AJAX请求在第二个页面上抓取和解析HTML。通过Chrome和FF的网络面板，我发现它也会从那里加载图像，但只有当我在“success”回调中使用$(data)加载结果时才会加载图像。

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

但无论如何，简单地说，有没有方法可以防止这种情况发生？我需要从结果中获取信息，但它从未到达主DOM。是否有脚本可以防止图像加载直到视图出现，或者永远不会针对已加载的元素触发？请注意，这是用于用户脚本应用程序，因此我并没有完全控制目标HTML。

谢谢！

- Morgon

Answer 1

造成这种情况的原因是一旦您创建带有src属性的图像，该图像就会被加载。例如：

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

浏览器在将图像添加到DOM之前会立即加载该图像。这通常是一种优化方式，例如，可以用于预加载稍后要使用的图像。

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

最简单的解决方案是在将HTML附加到DOM之前删除所有img标签。

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

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

- lonesomeday

---

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

Answer 2

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

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

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

- kleinohad

---

感谢您的回复...问题在于我实际上需要那些图像标签（除了其他标签，不仅仅是那个）！更不用说字符串提取似乎会非常耗费资源和浪费时间。..难道没有办法在目标上使用jQuery而不完全加载所有内容吗？ - Morgon

Answer 3

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

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

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

- Variant

---

我对XML解决方案很感兴趣。你有任何能更好地解释这个问题的代码吗？与仅通过jQuery传递经过消毒的响应相比，有哪些好处？ - Morgon