时间戳

首页 > 解决方案 > Javascript 页面加载延迟

javascript - Javascript 页面加载延迟

问题描述

我的页面有加载屏幕。加载屏幕在淡出之前加载 5 秒并显示正文中的其余 div。

现在，body 中的其他 div 都有自己的动画。问题是所有动画在页面加载时开始动画。我想要的是，只有在加载屏幕完成超时 5 秒后，div 才会开始动画。我尝试为每个 div 添加 5s 的动画延迟，但是有很多 div，我认为这不是最好的方法。

这是我用于加载屏幕超时的代码。

$(window).on("load", function () {
  $(".preloader").delay(5000).fadeOut("slow");
});

标签： javascripthtmljquerycss

解决方案

jQueryfadeOut允许您在动画完成后指定回调函数。这样，您无需为每个要制作动画的内容添加延迟，而只需在 的回调函数中指定动画的开始fadeOut。

这是一个工作示例。.preloader初始淡出后，文本慢慢变为红色。

$(window).on('load', function() {
  $('.preloader').fadeOut(1000, 'linear', () => {
    $('.content').css('color', 'red')
  })
})
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.preloader {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
}

.content {
  transition: all 1s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preloader"></div>
<div class="content">Some content</div>

推荐阅读