隐藏除第一个之外的所有图像，直到页面完全加载

Question

我的页面上有一个滑块，实现如下：

<ul class="slides" id="slides">
    <li class="slide"><a href=""><img src="1.jpg" title="" alt="" /></a></li>
    <li class="slide"><a href=""><img src="2.jpg" title="" alt="" /></a></li>
    <li class="slide"><a href=""><img src="3.jpg" title="" alt="" /></a></li>
    <li class="slide"><a href=""><img src="4.jpg" title="" alt="" /></a></li>
</ul>

如果我加载页面，所有图像都显示在onces上。只有在加载整个页面后，滑块脚本才会被触发并隐藏所有图像，但只有一个。 我尝试通过给滑块一定高度来修复它。实际上这适用于桌面，但如果我调整浏览器窗口大小则不行。

所以我想编写一些JavaScript来隐藏除第一个之外的所有图像，直到页面完全加载。

我尝试使用以下脚本，但它不起作用

<script>
jQuery(window).load(function() {
  jQuery(".slides li:not(:first-child)").hide(function() {
    jQuery(".slides li:not(:first-child)").show();
  });
});
</script>

有人能指出我正确的方向吗？

Answer 1

使用CSS

#slides li:not(:first-child) { display: none }

然后在加载时显示它们

$(window).load(function() {
    $(".slides li:not(:first-child)").show();
});