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

Question

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

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

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

感谢。

Answer 1

不，没有办法做到这一点。如果你有 <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> 标签)。