为图片库页面

时间:2016-11-21 17:45:16

标签: c# asp.net-mvc image-gallery

我正在开发一个asp.net mvc项目,其中包含一个带有图像厨房的页面。该页面将加载一个主要中等大小的图像和12个缩略图。如果用户单击缩略图,则图像将显示在中等大小的图像div中。如果某人点击中等大小的图像,则会在弹出窗口中打开较大尺寸的图像。页面可能需要36张图像(12x缩略图,12x中等,12x大)。我想知道加载三个大小的图像在逻辑上最有效的方式(性能与用户体验)是什么?

  1. 在初始页面加载时,是否将页面上所需的所有三种尺寸的图像传递给视图?
  2. OR

    1. 我是否只加载初始视图所需的图像,并根据需要检索其他图像'通过AJAX?

1 个答案:

答案 0 :(得分:1)

最佳方法通常取决于您的目标和客户的带宽以及如何向客户收取带宽。

如果选择选项1,我建议首先加载所需的图像,然后在页面渲染后再加载,然后通过javascript异步加载剩余的图像。这样你就不会减慢可见图像的速度,从而加载最初看不见的图像。

但加载所有图像(无论是否为异步)的缺点是,可能会为额外图像带来带宽成本的移动用户将被迫下载所有图像,即使他们从未使用过大部分图像。

所以特别是如果你有移动访问者,选项2通常更具吸引力。唯一的缺点是,当需要一个未加载的图像时,显示它需要更长的时间,因为它必须先下载。通常,这是预先加载所有图像的可接受的权衡,至少在移动设备上是这样。

但正如我所说,这完全取决于网站应该优化的内容。对于桌面访问者(即非移动设备),最佳体验通常是加载所需图像,渲染页面,然后异步加载其他图像。这为他们提供了所需图像的快速初始渲染,如果他们以后需要其他图像之一,它可以立即显示,因为它是在后台预加载的。

希望有所帮助。