在性能方面，将图像加载到JS库中的最佳实践方法是什么？

Question

我正在从头开始构建一个完全使用Javascript / JQuery呈现的库。

画廊由约70张照片组成。图库用户界面只是上一个和下一个按钮（没有缩略图）。

在性能方面（减少加载时间），加载图像的最佳实践方法是什么？

以下是我正在考虑的不同技巧：

1. 在页面加载时，只需加载第一张图片，然后预加载其余图片。

2. 当用户点击“下一步”按钮申请图片时，请使用JS创建并附加图片代码。

Answer 1

您可以考虑加载正在查看的图像，然后预加载相邻的图像，为您提供最佳的两种世界场景。但是，有些人可能会认为这是“过度工程化”。其他人也可能认为你应该从一些预先编写的库开始。如果你还没有调查过，那肯定能节省你一些时间。如果这对你来说很明显，我道歉。

我说这个的原因是，如果信息已经存在，它肯定会更快，而不必使用ajax来请求它。但是，预加载70张照片可能会以其他方式导致性能问题，具体取决于所使用的浏览器和客户端系统的强度。有时，大量使用资源的进程可能会导致浏览器滞后于看似无关的方式，例如滚动按钮冻结。如果某人的200美元上网本拥有1GB内存并且装有英国媒体报道，那就更是如此。

我认为你的意思是异步预加载图像。

修改:::

根据您上面的评论，您似乎只希望初始页面加载更快。在这种情况下，最好在页面加载时尽可能少地加载。然后使用jQuery在用户请求时附加图像。总的来说，这种方法可能会很有效。

Answer 2

第二个选项会更好，您可以根据需要加载其他图片。如果只能查看前几个图像，为什么要浪费您和用户的带宽下载所有图像？

Answer 3

我想我可能会加载当前图像，以及1或2个上一张/下一张图像。然后，每次单击下一个/上一个按钮时，请在前面加载另一个图像。

通过这种方式，您可以获得良好的用户体验，并减少潜在的下载速度。

Answer 4

  

就性能而言，我的意思是我希望缩短用户打开页面之间的时间，并且能够查看＆amp;与之互动

根据这个指标，我们可以说你的问题的最佳解决方案是加载他们将看到的第一个图像（所以有点＃1）。完成此图像加载后，您可以启用交互。同时，您将需要开始预加载下几张图像（如果有的话，也可以预先加载），这样他们就不会在与页面交互后等待。您可以设置缓冲区编号，具体取决于图像的大小和您希望它们在每个图像中保留多长时间。当然这两个想法相互抵消，所以你可以自己来玩这个价值。

根据您的使用方式，预加载~70张图像可能会很好。如果您必须在交互时移动每个图像，那么预加载并不是一个好主意。此外，如果您的图像很大，那么预加载并不是一个好主意，因为您不想占用他们的记忆。您最好的选择就是预先加载上一张/下一张图片。