第一次訪問頁面時，將圖片全部加載一秒鐘

Question

我正在嘗試創建一個包含指向其各自頁面的鏈接的幻燈片（共5個）。我發現一個簡單的代碼似乎可以工作，但是當頁面第一次加載時，它會在幻燈片放映開始前一秒鐘加載所有五張圖像。當頁面第一次加載時，有沒有辦法隱藏其他圖片？

我的測試頁位於：http://www.northeastern.edu/test/coe/test.html

的頁面是一個更大的CMS的一部分，我的編輯是在頁面的中心全景DIV的一部分。當我嘗試在CMS之外加載此部分時，它似乎可以正常工作，但我無法一起工作。

這是我添加的代碼：

<div id="panoramic"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
     <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" ></script> 
     <script> 
     $('.rotator').cycle({ 
      speed: 500, 
      fx: 'fade', 
      timeout: 6000 
     }); 
     </script> 

     <div class="rotator"> 
     <div><p><a href="link0"><img alt="" src="header00.png" /></a></p></div> 
     <div><p><a href="link1"><img alt="" src="header01.png" /></a></p></div> 
     <div><p><a href="link2"><img alt="" src="header02.png" /></a></p></div> 
     <div><p><a href="link3"><img alt="" src="header03.png" /></a></p></div> 
     <div><p><a href="link4"><img alt="" src="header04.png" /></a></p></div> 
     </div> 
    </div> 

Answer 1

隱藏所有不打算是在使用內聯CSS開始可見的。

<div class="rotator"> 
    <div><p><a href="link0"><img alt="" src="header00.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link1"><img alt="" src="header01.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link2"><img alt="" src="header02.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link3"><img alt="" src="header03.png" /></a></p></div> 
    <div style="display: none;"><p><a href="link4"><img alt="" src="header04.png" /></a></p></div> 
    </div> 

Answer 2

你的問題主要是CSS相關...你還沒有爲幻燈片容器或幻燈片元素設置任何CSS。如果您在頁面上禁用了JavaScript，您將看到您的rotator容器只是展開到所有內容的高度。這一切都可以用CSS來控制。

當前您正在等待頁面就緒事件來爲您設置在頁面加載過程中較晚的css，而css會立即進行處理。

給幻燈片容器一些尺寸。然後，當您添加overflow:hidden時，無法看到超出元素邊界的圖像。

範例CSS規則的樣式放置：

.rotator{ 
    width: 700px; 
    height:300px; 
    overflow:hidden; 
}