html网站中的jQuery图像滑块一次加载所有图像

Question

我的网站标题部分有一个 jQuery 图像滑块，它以自动滑动动作定期显示图像。现在的问题是，当您第一次加载页面时（没有缓存任何内容），它会一次加载滑块中的所有图像，并将网页上的图像一个在另一个上对齐（一个 div 在另一个顶部)，因此您可以在页面加载的那一刻立即看到所有图像。我的网站：www.mrsinghcafe.com/league/

HTML

<div id="menu">
    <a href="javascript:void(0);"><img src="img/image-1.jpg" title="Lorem ipsum dolor sitamet conse ctetu" alt="image1" /></a>
    <a href="javascript:void(0);"><img src="img/image-2.jpg" title="Sed do eiusmod tempor incididun" alt="image2" /></a>
    <a href="javascript:void(0);"><img src="img/image-3.jpg" title="Duis aute irure dolor in reprehenderit" alt="image3"/></a>
    <a href="javascript:void(0);"><img src="img/image-4.jpg" title="Voluptate veldolor sit amet conse ctetu" alt="image4" /></a>
    <a href="javascript:void(0);"><img src="img/image-5.jpg" title="Ipsum dolor sit amet conse ctetu" alt="image5" /></a>
</div>

我正在使用这个轮播http://dev7studios.com/plugins/caroufredsel/

Answer 1

图片没有被 CSS 隐藏，所以它们会一直显示，直到 JS 开始加载页面。

您可以将所有元素放在同一个位置，这就是轮播插件所做的。

'position: absolute; z-index: 0; display: block;'

所以你可以在 style.css 中添加

#menu{
    position:relative; /* this constrains any child elements whose position is absolute */
}

#menu a{
    position:absolute;
    top:0;
    left:0;
}