防止图像在非 DOM jQuery AJAX 解析上加载
Posted
技术标签:
【中文标题】防止图像在非 DOM jQuery AJAX 解析上加载【英文标题】:Prevent images from loading on non-DOM jQuery AJAX parse 【发布时间】:2011-09-23 00:31:33 【问题描述】:我正在使用 jQuery ajax 请求来抓取和解析辅助页面上的 html。 查看 Chrome 和 FF 的网络面板,我注意到它也会从那里加载图像——但只有当我在“成功”回调中使用 $(data) 加载结果时。
内容未加载到当前页面的 DOM 中,所以我真的有点困惑为什么会发生这种情况。
但无论如何,简单地问一下,有没有办法防止这种情况发生?我需要从结果中获取信息,但它永远不会到达主 DOM。阻止图像加载直到视图在这里工作的脚本会不会触发加载的元素?请注意,这是针对用户脚本应用程序的,因此我无法完全控制目标 HTML。
谢谢!
【问题讨论】:
【参考方案1】:发生这种情况的原因为什么是,一旦您创建了具有src
属性的图像,该图像就会被加载。例如:
var image = document.createElement('img');
image.src = 'example.png';
图像在被添加到 DOM 之前立即由浏览器加载。这实际上通常是一种优化。例如,它可用于预加载稍后将使用的图像。
由于 jQuery 将 HTML 字符串构建为 DOM 结构,它创建 img
元素的方式与上面的 sn-p 几乎相同。当图像元素出现时,甚至在它被附加到 DOM 之前,文件就会从服务器加载。
最简单的解决方案是在附加之前从 HTML 中删除所有 img
标签:
html = html.replace(/<img\b[^>]*>/ig, '');
如果这不是一个选项并且您需要img
元素,您可以将src
属性重命名为其他名称,或者如果您不需要它们,则删除这些属性。
【讨论】:
我喜欢这个解决方案;我能够很快地用另一个标识符替换“src”属性文本。【参考方案2】:在将返回的字符串加载到 DOM 之前,您可以从返回的字符串中查找并删除所有图像标签。
这是 HTML 图像的正则表达式:
<[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:</[iI][mM][gG]>)*
【讨论】:
感谢您的回复...问题是我实际上需要那些图像标签(在其他标签中,不仅仅是那个)!更不用说字符串提取似乎非常密集和浪费。 .. 如果没有完全加载所有内容,真的没有办法在目标上使用 jQuery 吗?【参考方案3】:您的问题是将响应文本加载到 jQuery 元素 ($(data)
) 中。这实际上为加载的内容创建了一个 DOM,即使您没有将它添加到“主”DOM。
您应该尝试做的是将该文本排除在 jQuery 之外,并使用正则表达式在文本级别对其进行处理,或者将其加载到 XML 文档中并使用各种可用的 XML 方法对其进行查询。
如果您想使用 jQuery 并停止加载,您可以尝试阅读此处:javascript: Cancel/Stop Image Requests
【讨论】:
我对 XML 解决方案很感兴趣。您有任何代码可以更好地解释这一点吗?与简单地通过 jQuery 传递经过清理的响应相比有什么好处吗?以上是关于防止图像在非 DOM jQuery AJAX 解析上加载的主要内容,如果未能解决你的问题,请参考以下文章