避免顯示圖片表的增量渲染

Question

我有一個網站，在html表中顯示圖片。當我點擊頁面時，它會根據圖片大小逐漸加載並調整表格的大小。

是否有更好的方法來做到這一點，所以我可以：

等待，並顯示該表後，一旦其準備撕裂，避免增量裝載： 呈現出一些「加載。」更新，直到它完全呈現

Answer 1

指定各圖像的高度和寬度爲HTML標籤（無論是通過CSS或img標記本身的height/width屬性）的一部分。這樣，瀏覽器在完全下載圖像文件之前就知道爲圖像分配多少屏幕空間（以及如何佈置頁面）。

這甚至是Google的PageSpeed optimization recommendations的一部分。

Answer 2

你可能想看看"CSS sprites"的技術。這是一個CSS技巧，可以讓您將多個圖像合併到一個大文件中，該文件一次全部下載，但仍然在頁面上顯示爲單獨的圖像。