加載與大圖像檔案DIV加載頁面的其餘部分

Question

我是http://concretetoboggan.uwaterloo.ca的網站管理員和第一次網頁設計師，所以我有點絆倒了我的方式通過CSS。我一直有一個奇怪的問題。

如果您轉到鏈接（第一次），則頁面會在加載頁面的其餘部分之前在主幻燈片上停頓2-3秒。這真的很讓人分心，似乎很容易解決，但我無法修復它。

以下是網站的淨時間表，正如您所看到的，Firebug顯示出一個神祕的差距。

該頁面執行的事件的序列（應該是）：在頁面的開始

負載頁

顯示幻燈片的第一圖像（其餘

1. 負載的jQuery的圖像被加載到具有'隱藏'類的div中，大概瀏覽器會這樣做異步）
2. 繼續加載頁面
3. 刪除'hidden'類S於DOM準備
4. 負載的jQuery bxSlider上DOM準備

每個幻燈片的幻燈片的與內部的IMG標籤和標題欄組成一個div的子DIV絕對定位在底部：0。

我已經厭倦了以下優化，這有助於稍微對未不惜一切：

• 刪除加載的幻燈片下表（似乎加快了一點東西，還是攤）
• 減少加載圖像的大小（加速了一點東西，還是有檔位）
• 把IMG「src」中的「DSRC」屬性，然後將其重新分配在DOM就緒（還是有檔位）
• 把圖片放在後臺：div的CSS（不需要的佈局問題）

Answer 1

很多時候，「拖延」是由於頁面沒有足夠的信息來計算佈局，因爲它在加載它們之前不知道圖像的尺寸。

如果發生的知道你的圖片的尺寸，您可以避免更改您的<img>標籤這個特殊問題...

<img src="myimage.jpg"/> 

...到...

<img src="myimage.jpg" width="640" height="480"/> 

...或任何他們碰巧是。

但是，頁面可能會失速的原因還有很多。

---

更新

另一件事，你有時可以做，以加快速度：如果你加載與不需要渲染頁面的<script>標籤的腳本，但僅是用於處理後續的用戶輸入，您可以延遲腳本加載，直到頁面渲染後通過添加defer屬性，例如改變...

<script src="http://someslowsite.com/somescript.js"> 

...到...

<script src="http://someslowsite.com/somescript.js" defer="defer"> 

...但如果你需要的腳本來渲染頁面，那麼這將是不可能的。如果您認爲用戶能夠比第三方站點更快地從您的站點加載腳本，請自行製作副本並託管它。