javascript - 存储图像最有效的方式是什么？ HTML/CSS/JS

Question

我将拥有大量图像，并尝试找到存储这些图像的最有效方法，以保持页面活泼。

到目前为止我只想了两种方法:用javascript加载，例如picture = new Image(); picture.src = "file.jpg";并根据需要附加/删除到页面，或加载到 <img>并设置display:none 。

还有其他选择吗？什么被认为是最好的方法？

Answer 1

照片库的最佳方法(如果这就是您正在构建的内容)通常是具有多种尺寸的图像，至少两个:

1. 高度压缩的小尺寸，因此占用空间小:这是您加载到网格中并显示在有多个图像的页面中的图像
2. 压缩率较低、图像质量较高的较大图像 - 这是当人们想要查看详细信息时显示的图像。

由于人们最常从已经显示小/快速加载版本的页面访问详细图像，因此已经在浏览器缓存中，因此您可以使用一些技巧并获得即时照片，而无需预加载任何内容。

事情是这样的:

在详细信息页面上，您可以在具有较大详细版本尺寸的图像标签中显示高度压缩的小图像。然后，您可以使用 new Image() 在后台加载较大的详细版本，并附加一个 onload 事件，该事件将具有小压缩版本的图像标记的源更改为大压缩版本详细版本。

它看起来很棒，工作速度很快，用户会喜欢你的;)

PS:存储图像的最佳方式是浏览器缓存，而不是 js 或 DOM，因此，如果您确实希望预加载图像(这通常是一个不好的做法(尽管有时可能是必要的))，请让浏览器获取通过包含一个 css 文件在后台为您提供这些文件，该文件以未应用于您网站的可视区域的样式引用它们。