就性能而言，将图像加载到 JS 图库的最佳实践方法是什么？
我正在从头开始构建一个完全使用 Javascript/JQuery 呈现的画廊。
该画廊由约 70 张照片组成。图库用户界面将只是上一个和下一个按钮（没有缩略图）。
就性能（减少加载时间）而言，加载图像的最佳实践方法是什么？
以下是我正在考虑的不同技术：
在页面加载时，只需加载第一个图像，然后预加载其余图像。
在当用户点击“下一步”按钮请求图片时，使用JS创建并附加图片标签。
I'm building a gallery from scratch that is rendered completely with Javascript/JQuery.
The gallery consists of ~70 photos. The gallery UI will just be previous and next buttons (no thumbnails).
In terms of performance (reduced load times), what is the best-practices way to load the images?
Here are the different techniques I'm considering:
On page load, just load the first image, and preload the rest.
When the user clicks the "next" button to request an image, use JS to create and append the image tag.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我想我可能会加载当前图像以及 1 或 2 个上一个/下一个图像。然后，每次单击下一个/上一个按钮时，加载前面放置的另一张图像。
这样您可以获得良好的用户体验，并减少潜在的下载。
I guess I'd probably load the current image, and 1 or 2 previous/next images. Then each time the next/previous buttons are clicked, load another image a couple placed ahead.
This way you get a good user experience, and also reduce potential download.
第二个选项会更好，您可以按需加载额外的图像。当只能查看前几张图像时，为什么要浪费您和您的用户的带宽来下载所有图像呢？
The second option would be better, where you load additional images on demand. Why waste your and your user's bandwidth downloading all images when only the first few may be viewed?
您可能会考虑加载正在查看的图像，然后预加载相邻图像，从而获得两全其美的方案。然而，有些人可能会认为这是“过度设计”。其他人也可能会认为您应该从一些预先编写的库开始。如果您还没有研究过这一点，那肯定可以节省您一些时间。如果这对您来说是显而易见的，我深表歉意。
我这么说的原因是，如果信息已经存在，那么肯定会更快，而不是使用 ajax 来请求它。但是，预加载 70 张照片可能会以其他方式导致性能问题，具体取决于所使用的浏览器和客户端系统的强度。有时，大量使用资源的进程可能会导致浏览器以看似无关的方式出现滞后，例如滚动按钮冻结。如果某人的上网本价值 200 美元，配备 1GB 内存并装有臃肿软件，则尤其如此。
我假设您的意思是异步预加载图像。
编辑:::
根据您上面的评论，您似乎只是希望初始页面加载速度更快。在这种情况下，最好在页面加载时加载尽可能少的内容。然后使用 jQuery 根据用户请求附加图像。总的来说，这种方法可能会非常有效。
You might consider loading the image being viewed and then also pre-loading the adjacent image(s) giving you a best-of-both worlds scenario. However, some people might argue that this is "over-engineering." Other people will also probably argue that you should start with some pre-written library. If you have not looked into that already, that could certainly save you some time. I apologize if this is obvious to you.
The reason I say this is that its certainly faster if the information is already there instead of having to use ajax to request it. However, pre-loading 70 photos could cause performance issues in other ways, depending on the browser being used and the strength of the clients system. Sometimes a process that heavily utilizes resources can cause browsers to lag in ways that seem unrelated, such as the scroll button freezing up. This is especially true if its someone's $200 netbook with 1gb ram and loaded with bloatware.
I assume you mean to pre-load the images asynchronously.
Edit:::
Based on your comment above, it looks like you just want the initial page load to be faster. In this case, it would probably be best to load as little as possible on page load. And then use jQuery to append images as the users requests them. Overall, this approach would probably work quite well.
根据这个指标，我们可以说解决您的问题的最佳解决方案是加载他们将看到的第一张图像（有点像#1）。该图像加载完成后，您就可以启用交互。同时，您将需要开始预加载接下来的几张图像（如果有的话，也包括上一张图像），以便它们在与您的页面交互后不会等待。您可以根据图像有多大和您期望它们在每个图像上停留的时间来设置缓冲区数。当然，这两个想法是相互抵消的，因此您可以自行决定其价值。
预加载约 70 张图像可能没问题，具体取决于您的使用方式。如果您必须在交互时移动每张图像，那么预加载并不是一个好主意。另外，如果您的图像很大，那么预加载不是一个好主意，因为您不想占用它们的内存。您最好的选择是预加载前几张/后几张图像。
Upon this metric, we can say the best solution to your problem is to load the first image they will see (so kinda of #1). Once this image is done loading, you can enable interaction. At the same time you will want to start preloading the next few images (and previous if there are) so that they will not wait after interacting with your page. You can set a buffer number depending on how large the images are and how long you expect them to stay at each image. Of course these two ideas offset each other so it's up to you to play around with the value.
Preloading ~70 images can be fine depending on how you're using it. If you are having to shift every single image upon interaction, then it's not a good idea to preload. Also, if your images are large, it's not a good idea to preload because you don't want to hog their memory. Your best bet is just to preload the previous/next few images.