时间戳

首页 > 解决方案 > 使用 Javascript 延迟最简单的 HTML 页面

javascript - 使用 Javascript 延迟最简单的 HTML 页面

问题描述

我正在托管这个超级简单的 HTML 页面，它基本上是一个屏幕，一次显示 8 个选项卡之一。基本上如下，但有 8 个选项卡而不是我在这里显示的 2 个：

<div id="global">
  <nav>
    <a href="#" id="nav1" class="navBtn" onclick="switchSlide(event, 1);">Slide 1</a>
    <a href="#" id="nav2" class="navBtn" onclick="switchSlide(event, 2);">Slide 2</a>
  </nav>
  <div id="content">
    <section id="slide1">
      <img src="./ss01.jpg" />
    </section>
    <section id="slide2">
      <img src="./ss02.jpg" />
    </section>
  </div>
</div>

当您单击选项卡时，这是执行转换的函数：

function switchSlide(e, slideNum) {
  e.preventDefault();
  for (x=0; x<document.getElementsByTagName("section").length; x++) {
    document.getElementsByTagName("section")[x].className = "";
    document.getElementsByClassName("navBtn")[x].className = "navBtn";
  }
  document.getElementById("slide"+slideNum).className = "active";
  document.getElementById("nav"+slideNum).className = "navBtn active";
}

交叉淡入淡出过渡由 CSS 处理，过渡有持续时间但没有延迟。

section {
  opacity:0;
  transition:opacity 0.6s;
}

section.active {
  opacity:1;
}

当我在计算机上测试页面时，单击选项卡后立即开始转换。但是当我在 iPad 或手机上进行测试时，当我触摸选项卡时，它会立即检测到活动/悬停/聚焦状态，但随后会有半秒的延迟，然后选项卡会改变颜色，并且内容开始转换。

我会认为这样一个简单的页面会像闪电一样快！我试过在我的设备上浏览亚马逊，他们的按钮反应比我的标签更快。所以我假设这不仅仅是由于设备的运行方式。此外，我尝试将我的页面限制为 2 个标签而不是 8 个，但它并没有更快。此外，我尝试将我的页面托管在 2 个不同的服务器上，但这也无济于事。我错过了什么？

谢谢你的帮助 ！

标签： javascripthtmlcss

解决方案

移动浏览器在点击后会有 300 毫秒的延迟。有一些解决方法，但对我有用的是在 head 中包含视口：

<meta name="viewport" content="width=device-width, user-scalable=no">

其他解决方案可以在这里找到： 消除移动 Safari 中点击事件的 300 毫秒延迟

推荐阅读