阻止滑块中的图像被视为页面加载？

Question

这是网站：

http://cholakislaw.com/install/

我认为这是对CSS的调整，因为该主题的演示不会受到此问题的影响：

http://www.mojo-themes.com/item/attorneys-lawyer-wordpress-theme/demo/

Answer 1

最好的方法是：

<强> CSS

 .slider ul li img {
    display: none;
 }

 .slider ul li:first-child img{
     display: block;
 }

通过执行此操作，您将隐藏所有幻灯片显示图像，然后仅在加载时显示第一个子图像。之后，js会做它的技巧并覆盖它。

Answer 2

这是因为在滑块组件（在这种情况下，easySlider）设置了height元素的overflow和#slider属性之前，图像开始加载。因此，当图像开始加载时，#slider足够高，看不到第一张图像。

为防止这种情况发生，您可以在slider.css中添加以下规则：

#slider {
    height: 100%; /* parent element with class .slider has his height already set */
    overflow: hidden;
}