javascript - 如何优化我的 javascript slider 加载？

Question

我一直在编写一个小的响应式图像 slider ，以使用 responsiveslides.js 显示我的婚礼照片。和一些处理垂直图像的脚本(它根据浏览器视口(viewport)设置最大高度)。你可以在http://johnandalex.us/photos看到它它终于按照我想要的方式工作，除了 2 个异常(exception):

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
    });
  });