1

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

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

关于如何改进这两个项目的任何想法？我对 HTML 和 CSS 完全满意，但在 JS 方面完全是新手。

谢谢。

4

2 回答 2

2

我会隐藏幻灯片容器，直到 $(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
    });
  });
于 2012-07-05T20:45:56.980 回答
0
  1. 如果可能，您应该始终为图像设置高度和宽度。
于 2012-07-05T20:46:05.813 回答