如何优化我的javascript滑块加载？

Question

我一直在编写一个响应式图像滑块来显示我的婚礼照片，使用responsiveslides.js和一个小脚本来处理垂直图像（它根据浏览器视口设置最大高度）。您可以在http://johnandalex.us/photos看到它。它最终可以达到我想要的效果，除了两个例外：

1. 图片显示然后在延迟后调整大小（当浏览器窗口小于图片的完整大小时）
2. 在完全加载图片之前，不显示上一个/下一个箭头（这需要一段时间，特别是在较慢的连接上，因为有超过100个图像）

有关如何改进这两项的任何想法？我对HTML和CSS非常熟悉，但对于JS来说，我是一个完全新手。

感谢。

Answer 1

我会隐藏幻灯片容器，直到$（document）.ready触发，然后显示控件。您可以在页面加载时显示加载器动画gif。

修改

以下是如何实现此效果的示例：

首先，您需要在包含幻灯片显示的UL上指定display：none：

<ul class="rslides rslides1" style="display:none;">

接下来，在文档就绪时显示幻灯片容器并按照您已经完成的方式启动插件：

  $(document).ready(function () {

    $(".rslides").show();

    $(".rslides").responsiveSlides({
        auto: false,
        speed: 700,
        timeout: 3000,
        nav: true
    });
  });

Answer 2

1. 应尽可能为图像设置高度和宽度。