如何使JavaScript加載速度更快？

現在，我們有使用javascript的圖像幻燈片。但是，當頁面仍在加載時，在javascript被讀取並執行之前，圖像將以正常列出的樣式（帶有項目符號）簡要顯示。問題是，我們不希望訪問者看到「裸體」圖像列表，即使只是簡單地（有時會持續2-3秒）。我們希望他們立即只看到一個圖像（不是一個列表），變成另一個（js做什麼）。如何使JavaScript加載速度更快？

這是幻燈片的HTML代碼：

<div class="slideshow"> 
    <ul> 
     <li><img src="images/....jpg" /></li> 
     <li><img src="images/....jpg" /></li> 
     <li><img src="images/....jpg" /></li>         
     <li><img src="images/....jpg" /></li> 
     <li><img src="images/....jpg" /></li> 
    </ul> 
</div>

這是我們所使用的幻燈片：

http://www.littlewebthings.com/projects/blinds/

，這是JS文件：

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

我正在考慮臨屋區這可能是一個緩存問題，因爲上面的演示幻燈片只顯示一次「裸」圖像列表。一旦它被刷新/重新訪問，它不再顯示（或者仍然顯示比第一次快得多，幾乎無法察覺）。另一方面，我們不斷重新閱讀JavaScript，就好像它總是第一次（如果你知道我的意思）。

來源

2010-12-09 catandmouse

雖然這並不直接回答讓它立即加載的問題，但一種選擇是從<div class="slideshow" id="myId" style="visibility: hidden">隱藏你的div開始，然後一旦你知道JS已經加載，顯示它（例如使用jQuery的）：

$("#myId").css("visibility", "visible");

來源

2010-12-09 09:58:08 Dunnie

用css隱藏所有列表，只顯示第一個圖像。所以用戶不會看到除第一張圖像外的所有列表。

來源

2010-12-09 09:54:36 Napas

你的意思是使用「display：none;」？但是不會一直隱藏其他圖像，因爲其他圖像將在幻燈片中稍後調用/顯示。 – catandmouse 2010-12-09 09:57:58

如果發生這種情況，請使用js刪除display：none。然後CSS規則將只有有效，直到js將被加載。 – Napas 2010-12-09 10:02:31

嘗試編輯UL風格是這樣的：

ul{ 
    list-style:none; 
} 

ul li{ 
    position:absolute; 
}

名單包裝必須有一個固定的高度;）

希望它可以幫助

來源

2010-12-09 09:58:29 stecb

如何使JavaScript加載速度更快？

回答

相關問題