如何优化我的JavaScript滑块加载

How to optimize my javascript slider loading?

本文关键字：JavaScript 加载 我的 何优化 优化      更新时间：2023-09-26

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

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

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

谢谢。

我会隐藏幻灯片容器，直到 $（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
    });
  });
  1. 如果可能，应始终为图像设置高度和宽度。
相关文章：