使用jCarousel为jQuery隐藏内容onLoad

Question

我有一个问题，我将36张图片放入列表中，然后将它们显示在图像轮播中（使用jcarousel）

它们的大小不是很大，每个可能只有12-15kb，但在页面加载时大约1-2秒，它们都会垂直向下显示在页面上。

以下是链接：http://se.mbs.co（这是一个测试网站，因此有些HTML需要清理）

有任何关于防止这种情况发生的最佳方法的想法吗？

我尝试过使用CSS，但它似乎只是覆盖它。

任何想法都会好！

作为参考，我使用的是最新版本的jQuery和jcarousel。

Answer 1

我通过制作包含元素overflow: hidden并使用固定高度来进行简单修复。这避免了对jQuery编码的需要。

Answer 2

Stephan Muller的回答是一个好的开始，但请参阅my answer关于使用jQuery.UI.Accordian的类似问题。

基本上：

1. 决定JavaScript关闭时的外观，并将其设为默认样式。
2. 决定当JavaScript on 时你希望它看起来如何，但页面仍在加载（pre-dom-ready）并为其添加样式
3. 在 dom-ready之后为添加样式，当您的轮播到位时。请注意，jCarousel将您的列表包装在一些生成的div中，因此您可能还需要在那里应用您的样式。

希望有所帮助！

Answer 3

通过将display:none设置为包含元素，您应该从可能隐身的图像开始。也许使用默认图像（或偶数背景图像）在加载时显示某些内容。然后使用jQuery，您可以绑定一个函数，以在内容完全加载时显示div。这可以防止在加载过程中出现毛刺：）