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

Question

我正在使用 jQuery ajax 请求来抓取和解析辅助页面上的 HTML。查看 Chrome 和 FF 的网络面板，我注意到它也会从那里加载图像 - 但只有当我在“成功”回调中使用 $(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(/<img\b[^>]*>/ig, '');

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