javascript - 无法修改部分源码，如何控制图片加载？

Question

我在一个模板系统中工作，该系统使用一系列插件来输出一些标记。这些插件之一是包含多个图像的图库。随着图库大小的增长，加载速度会受到影响，我正在尝试想出一种创造性的方法来解决这个问题。

这是一个例子:
{% plugin gallery %}

将变成:

<div id="gallery">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
   <img src="sample.png" alt="Sample Image">
</div>

我无法控制正在输出的内容，只能用额外的 HTML 将其包装起来。这显然导致加载了 5 张图像

一种在您需要时加载图像的技术是给它们一个假属性，然后在您想要加载时将其转换为 src(例如 )，但我无法编辑该输出。

我的另一个想法是用一些东西包装所有输出以防止加载，例如 HTML 注释，然后将其剥离/使用带有一些 JavaScript 的数据来根据需要重建图像元素并将它们追加回 DOM。这看起来很老套，我没主意了。

总结:

• 我想阻止图像加载，以便我可以按需要加载它们并更好地控制页面加载。
• 我无法编辑图像标签的标记，但可以使用附加标记进行包装。
• 我受限于客户端语言 (HTML/JS)。在这种情况下，我无法使用服务器端语言或修改服务器本身。

还有其他可能在这里起作用的技术吗？

Answer 1

如果您说您无法更改 <img> HTML 内容中的标签，那么你就被卡住了。您对 javascript 或 HTML 所做的任何事情都不会阻止它们加载，然后允许您控制它们的加载时间。

在图像已经开始加载之前，Javascript 无法对 DOM 进行操作，因此当您使用 javascript 进行控制时，它们将已经加载。

用 HTML 注释包裹在某些浏览器中可能会出现问题，因为我了解到并非所有浏览器都会保留注释中的内容。

使用 CSS 规则(display: none 或 visibility: hidden)呈现图像不可见的各种方法不会阻止它们加载。