由於圖像，加載頁面時負載較大（滯后）

Question

我現在正面臨這個問題。 當我的頁面加載（DOM）時，我調用一個返回1880個圖像的函數，這些圖像存儲在steam服務器中。

在回調之后，這些圖像被添加到我的DOM中，這返回了具有1880個元素的數組響應（鏈接到圖像和一些信息）。 在回調之后，如前所述，這些圖像被構建到DOM中。

這種方法在網站上造成大量LAG（超過20秒凍結）。 有什么選擇可以運行嗎？ 怎么處理這個？

Answer 1

解決方案是僅加載您需要的圖像。 我非常懷疑用戶可以同時看到1880張圖像。

頁面加載后，您可以使用任何框架向您的服務器發送asycronous js請求以獲取其余圖像。

例：

- 當頁面加載時，只有10個圖像（假設用戶在屏幕上一次看到多少圖像）

- 當用戶開始滾動時，他應該看到新的圖像。 所以onscroll你發起你的10個新圖像的ajax請求。

- 每當用戶滾動時重復

當然，根據您嘗試的操作，上述步驟需要以不同方式進行調整/操作

Answer 2

我建議以不同的分辨率獲得3張精靈表，為用戶的屏幕大小加載最好的精靈表，並使用事件委派將點擊事件放在每個精靈上。 這應該解決您在問題和評論中提到的所有內容。