Easyslider 1.7 帮助 - 页面加载时显示的所有内容

Question

在我的页面上使用 jQuery 实现 Easy Slider 1.7 时，我发现当页面首次加载时，ul 滑块中的两个图像都会显示，然后滑块会正确加载，并且仅显示第一张幻灯片。

纠正此问题的最佳方法是什么，以便在脚本正确加载之前滑块 div 不会显示？我正在使用这段代码来运行它：

$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        pause: 10000
    });
});

Answer 1

您可以通过 CSS 隐藏内容，如下所示：

#slider { display: none; }

然后在页面加载时也显示它：

$(document).ready(function(){
  $("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});

为了安全起见，我会为非 JS 用户在页面中添加一个块，如果您有很多内容，可以在里面添加一个样式表其中，否则只是一个样式标签：

<noscript><style type="text/css">#slider { display: block; }</style></noscript>

Answer 2

我将下面的代码添加到我的 CSS 中以隐藏图像，使其不被堆叠起来。

/*Added to hide stacking of images on IE 7/8*/
#slider{
  height:227px;
  overflow:hidden;
}