jquery - 如何在不更改动态(用户)生成图像的 img 标签或 HTML 的情况下延迟加载图像

标签 jquery html css lazy-loading

我知道有很多方法可以延迟加载图像,但是有没有一种方法可以在不修改 <img> 的情况下最终做到这一点?标签?

tool这似乎是最受欢迎的说它不能做到。

HTML 无法更改,因为它用作输入,除非用户这样做,否则无法更改。

感谢。

最佳答案

不,没有办法做到这一点。如果你有 <img> HTML 中带有 src 的标签在它们中指定的属性,然后浏览器将在解析页面时开始加载这些属性。因此它们不会被延迟加载,并且您无法使用 Javascript 来阻止这种情况,因为图像的加载将在页面被解析时开始或排队,这是在您的 Javascript 有机会运行以修改任何内容之前。因此,当您尝试使用 Javascript 影响事物时,图像已经开始加载。

使用 CSS 使图像不可见(display: none 或 visibility: hidden)不会阻止图像加载,因此你不能以这种方式影响事情。


我真的不完全理解您的限制是什么,但是延迟加载的一种方法是不包含包含延迟加载的内容 <img>原始 HTML 中的标签。然后,您可以在需要显示时使用 Javascript 插入未修改的 HTML block 。当然,您必须能够获取或构建要插入的“HTML block ”。

另一种可能性(更牵强)是加载一个没有真正内容的“容器”页面,然后使用 Ajax 动态获取要显示的页面 HTML,然后修改HTML(修改 HTML 中的 <img> 标记)在将 HTML 插入容器之前使用您的 Javascript。

更疯狂的是,您可以使用代理服务器对原始 HTML 进行必要的修改以配置延迟加载(修改 <img> 标签)。

关于jquery - 如何在不更改动态(用户)生成图像的 img 标签或 HTML 的情况下延迟加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33839216/

相关文章:

javascript - Ember 使用 ajax 动态加载模板

javascript - 更改 WooCommerce 中某些产品的 "Sold out"

javascript - 触发菜单时禁用滚动

javascript - 为音频 html5 付款器添加可定制的进度条

javascript - 弹出窗口在向下滚动时更改位置

css - 在 Meteor.js 中使用自定义 bootstrap3 主题

php - 列中的 Wordpress 帖子

javascript - jQuery .css,如何将其翻译成 Javascript

javascript - 如何比较 TempData 中的值?

html - 选择body中除class之外的whole body