将加载屏幕添加到您的 Web 应用程序 - docuLoad

将加载屏幕添加到您的 Web 应用程序 - docuLoad

版本:

浏览量:69

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

docuLoad 是一个 jQuery 插件,它为您的 Web 应用程序添加了一个可定制的、由 CSS3 驱动的加载屏幕。

该插件在页面开始加载时向正文添加一个加载类,设置超时功能,以便加载屏幕有时间出现非常适合与动画/淡出页面等一起使用,并在页面完全加载时删除加载类.

如何使用它:

1.在body标签中添加加载类。

<body class="loading">

2. 为加载屏幕创建一个元素。

<div class="loading-screen"></div>

3. 将jQuery 库和jQuery docuLoad 插件的脚本添加到网页中。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous">
</script>
<script src="js/docuLoad.js"></script>

4. 在文档内的内部链接上调用该函数。

$('a').docuLoad();

5. 使用以下 CSS 自定义加载屏幕。

.loading-screen {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -9998;
  visibility: hidden;
  transform: translateY(5%);
  transition: all ease 1.2s;
  opacity: 0;
}
 
.loading .loading-screen {
  transform: translateX(0%);
  z-index: 9998;
  visibility: visible;
  opacity: 1;
  transition: all ease 200ms;
}

6. 如果要覆盖默认加载类。

$('a').docuLoad({
  bodyLoadClass: 'loading'
});

7. 以毫秒为单位设置超时。不要把这个高得离谱!!记住少即是多,人们不想等待 5 秒钟只是为了看到您的动画才被发送到下一页!

$('a').docuLoad({
  timeOut: 240
});

8. 默认情况下,插件会等待所有图像和 JS 加载后才会触发,这可能需要很长时间。因此,您可能希望设置windowLoad为 false 以在准备好更快响应的文档上触发。

$('a').docuLoad({
  windowLoad: false
});

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。