小编典典

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

ajax

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

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

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

谢谢!


阅读 261

收藏
2020-07-26

共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属性重命名为其他名称,或者在不需要它们时将其删除。

2020-07-26