我正在使用jQuery ajax请求来捕获和解析辅助页面上的HTML。查看Chrome和FF的“网络”面板时,我注意到它也会从那里加载图像- 但仅当加载结果时在“成功”回调中使用$(data)。
内容没有加载到当前页面的DOM中,所以我真的很困惑为什么会发生这种情况。
但无论如何,简单地问一下,是否有办法防止这种情况的发生?我需要从结果中获取信息,但是它永远不会碰到主DOM。阻止图像加载直到视图运行的脚本在这里起作用,还是永远不会针对加载的元素触发脚本?请注意,这是针对用户脚本应用程序的,因此我对目标HTML完全没有控制权。
谢谢!
究其原因 ,为什么 发生这种情况是,只要你有一个创建的图像src属性时,图像加载。例如:
src
var image = document.createElement('img'); image.src = 'example.png';
在将图像附加到DOM之前,它会 立即 由浏览器加载。实际上,通常这是一种优化。例如,它可以用于预加载图像,稍后再使用。
由于jQuery将HTML字符串构建为DOM结构,因此其创建img元素的方式与上述代码段相同。当图像元素存在时,甚至在将其添加到DOM之前,都会从服务器加载文件。
img
最简单的解决方案是img在添加HTML之前先删除HTML 中的所有标签:
html = html.replace(/<img\b[^>]*>/ig, '');
如果这不是一个选择,并且您需要img元素,则可以将src属性重命名为其他名称,或者在不需要它们时将其删除。