Easyslider 1.7帮助 - 在页面加载时显示所有内容 [英] Easyslider 1.7 help - all content displaying on page load

问题描述

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

In implementing Easy Slider 1.7 with jQuery on a page of mine, I find that when the page first loads, both images in the ul slider display and then the slider loads properly and only the first slide is displayed.

纠正此问题的最佳方法是在脚本加载之前不显示滑块 div 正常吗？我正在使用此代码运行它：

What is the best way to correct this so that the slider div doesn't display until the script has loaded properly? I'm using this code to run it:

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

推荐答案

你可以通过CSS隐藏内容，像这样：

You can just hide the content via CSS, like this:

#slider { display: none; }

然后在页面加载时显示：

Then show it on page load as well:

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

为了安全起见我为非JS用户添加一个块到页面，可能是一个如果你有很多这样的样式表，否则只是一个样式标记：

To be safe I'd add a block to the page for non-JS users, could be a style sheet inside if you have a lot of these, otherwise just a style tag:

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

这篇关于Easyslider 1.7帮助 - 在页面加载时显示所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！