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

Question

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

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