第一次访问页面时，将图片全部加载一秒钟

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; 
}