详细信息
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
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。