html - CSS显示内联项目在加载页面时短暂显示为列表项

Question

我有一个旋转木马（jcarousel），它显示内联项目。加载时，项目首先垂直显示（列表），然后切换到正常的内联位置。

我在几个网站上都有这个，觉得很烦人。

有什么可以做的吗？

谢谢

Answer 1

加载时意味着无法执行处理定位的实际javascript。

您可以事先通过 css 隐藏这些元素，并在侧面完成加载后将它们切换回可见。

Answer 2

您可以更改父 div 的 css 或轮播所在的任何容器：

#jcDiv { 
  visibility: hidden;
  height: 200px; /* Adjust this to what yours should be */
  overflow: hidden;
}

并且 onload （窗口，而不是文档，因此在加载图像之前它不会显示）：

$(window).load(function() {
  $("#jcDiv").css({ visibility: 'visible' });
});