防止在非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之前，都会从服务器加载文件。

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

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

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