为图库页面加载图像的最有效方法
most efficient method of loading images for image gallery page
我正在开发一个 asp.net mvc 项目，该项目包含一个带有图片集的页面。该页面将加载一张主要的中型图像和 12 张缩略图。如果用户单击缩略图，图像将显示在中等大小的图像中 div。如果有人点击中等尺寸的图像，将在弹出窗口中打开更大尺寸的图像 window。页面可能需要 36 张图像（12x 缩略图、12x medium、12x large）。我想知道加载三种尺寸的图像在逻辑上最有效的方式（性能与用户体验）是什么？
- 是否在初始页面加载时将页面上所需的所有三种尺寸的图像都传递给视图？
或
- 我是否仅加载初始视图所需的图像，并通过 AJAX 检索其他图像 'as-needed'？
最佳方法通常取决于您的目标和客户的带宽，以及带宽是如何向客户计费的。
如果您选择选项一，我建议您首先只加载所需的图像，然后在页面呈现后加载，然后通过 javascript 异步加载其余图像。这样你就不会为了加载最初不可见的图像而减慢可见图像的速度。
但加载所有图像（无论部分异步与否）的缺点是，移动用户可能因额外图像而产生带宽成本，即使他们从未使用过大部分图像，也将被迫下载所有图像。
所以特别是如果您有移动访问者，选项 2 通常更具吸引力。唯一的缺点是，当需要未加载的图像时，显示它需要更长的时间，因为必须先下载它。通常这是预加载所有图像的可接受权衡，至少在移动设备上是这样。
但正如我所说，这完全取决于网站应该针对什么进行优化。对于桌面访问者（即非移动设备），最好的体验通常是加载所需的图像、渲染页面，然后异步加载其他图像。这为他们提供了所需图像的快速初始渲染，如果他们以后需要其他图像之一，它可以立即显示，因为它已在后台预加载。
希望对您有所帮助。
我正在开发一个 asp.net mvc 项目，该项目包含一个带有图片集的页面。该页面将加载一张主要的中型图像和 12 张缩略图。如果用户单击缩略图，图像将显示在中等大小的图像中 div。如果有人点击中等尺寸的图像，将在弹出窗口中打开更大尺寸的图像 window。页面可能需要 36 张图像（12x 缩略图、12x medium、12x large）。我想知道加载三种尺寸的图像在逻辑上最有效的方式（性能与用户体验）是什么？
- 是否在初始页面加载时将页面上所需的所有三种尺寸的图像都传递给视图？
或
- 我是否仅加载初始视图所需的图像，并通过 AJAX 检索其他图像 'as-needed'？
最佳方法通常取决于您的目标和客户的带宽，以及带宽是如何向客户计费的。
如果您选择选项一，我建议您首先只加载所需的图像，然后在页面呈现后加载，然后通过 javascript 异步加载其余图像。这样你就不会为了加载最初不可见的图像而减慢可见图像的速度。
但加载所有图像（无论部分异步与否）的缺点是，移动用户可能因额外图像而产生带宽成本，即使他们从未使用过大部分图像，也将被迫下载所有图像。
所以特别是如果您有移动访问者，选项 2 通常更具吸引力。唯一的缺点是，当需要未加载的图像时，显示它需要更长的时间，因为必须先下载它。通常这是预加载所有图像的可接受权衡，至少在移动设备上是这样。
但正如我所说，这完全取决于网站应该针对什么进行优化。对于桌面访问者（即非移动设备），最好的体验通常是加载所需的图像、渲染页面，然后异步加载其他图像。这为他们提供了所需图像的快速初始渲染，如果他们以后需要其他图像之一，它可以立即显示，因为它已在后台预加载。
希望对您有所帮助。