我将有很多图像，并试图找到存储这些图像的最有效方法以保持页面简洁。
到目前为止，我只想到了两种方法：使用 javascript 加载，例如 picture = new Image(); picture.src = "file.jpg"; 并根据需要附加/删除到页面，或者加载到 <img> 并设置 display:none。
还有其他选择吗？什么是最好的方法？
【问题讨论】：
标签： javascript html performance image optimization
图片库的最佳方式（如果您正在构建的话）通常是拥有多种尺寸的图像，至少两个：
由于人们最常从已经显示小/快速加载版本的页面访问详细图像，因此已经在浏览器缓存中，因此您需要做一些小技巧并获得即时照片，而无需预加载任何内容。
是这样的：
在详细信息页面上，您在具有较大详细版本尺寸的图像标签中显示高度压缩的小图像。然后，您使用 new Image() 在后台加载较大的详细版本，并附加一个 onload 事件，该事件将带有小型压缩版本的图像标签的源更改为大型详细版本。
它看起来很棒，运行速度很快，用户会喜欢你的；）
PS：存储图像的最佳方式是浏览器缓存，而不是 js 或 DOM，所以如果你真的希望预加载图像，这通常是一种不好的做法（但有时可能需要），让浏览器获取通过包含一个 css 文件在后台为您提供它们，该文件以不应用于您网站可视区域的样式引用它们。
【讨论】：
我不确定“高效”，但最合乎逻辑的方法是不使用 JavaScript 加载图像（如果禁用 JavaScript，则无用）或通过 display 属性将图像设置为隐藏（同样，无论如何浏览器可能只会加载图像）。
因此，一个明智的建议是使用无聊的旧分页并在每页显示“n”张图片。但是，要使其保持最新状态，您可以使用“延迟”（也称为“延迟”）加载，并在用户滚动时通过 Ajax 加载其他页面内容。但是，如果禁用 JavaScript 等，这会优雅地降级为标准的“分页”行为，这一点很关键。
Google 的image search 就是完美的例子，如果你search here on StackOverflow 你会看到关于可能实现的讨论，等等。
【讨论】：
最好按照您拥有的方式使用 javascript，然后根据需要将其添加到 DOM，而不是先将其添加到 DOM，然后将其隐藏，因为 DOM 操作要慢得多，而且您可能不会使用一些图片
【讨论】：