加載圖像的圖片庫頁

Question

我工作的一個asp.net mvc的項目，包括與圖像廚房頁面的最有效的方法。該頁面將加載一個主要中型圖像和12個縮略圖。如果用戶點擊縮略圖，圖像將顯示在中等大小的圖像div中。如果一個人點擊中等大小的圖像，一個較大尺寸的圖像將在一個彈出窗口中打開。該頁面可能需要36個圖像（12倍縮略圖，12倍中等，12倍大）。我想知道在邏輯上最有效的方式（性能與用戶體驗）加載三個尺寸的圖像會是什麼？

1. 我是否需要通過在頁面上在初始頁面加載視圖中的圖像的所有三種尺寸？

OR

我是否僅裝入初始視圖所需要的圖像，並檢索附加圖像經由AJAX「按需」？

Answer 1

最好的方法通常取決於您的目標和客戶的帶寬以及帶寬如何計入客戶端。

如果你選擇一個，我建議只加載所需的圖像，然後在頁面渲染後，然後通過JavaScript異步加載其餘的圖像。這樣，你最終不會放慢可見圖像加載最初看不見的圖像。

但是，加載所有圖像（無論是否是部分異步）的缺點是，可能會有額外圖像的帶寬成本的移動用戶將被迫下載所有圖像，即使他們從未使用大部分圖像。

所以，特別是如果你將擁有移動訪問者選擇2如果經常更有吸引力。唯一的缺點是，當需要非加載的圖像時，顯示它需要更長的時間，因爲它必須先下載。通常這是一個可以接受的預付所有圖像的權衡，至少在移動設備上是這樣。

但正如我所說，這一切都取決於什麼樣的網站應進行優化。對於桌面訪客（即非移動），最好的體驗往往是加載所需的圖像，渲染頁面，然後異步加載其他的圖像。這給了他們所需要的圖像的快速初始渲染，如果他們以後需要其他的圖像之一是可用於顯示瞬間，因爲它是在後臺預加載。

希望有所幫助。