详细信息
fakeloader jQuery 插件可让您在网站页面之间切换时使用加载指示器创建平滑的淡入/淡出过渡。
此插件的目标是使您的正常网站行为像单页 Web 应用程序一样,可以在页面之间平滑转换以增强用户体验。
也适用于jQuery waitForImages 插件,该插件在图像完全加载时显示加载指示器。
如何使用它:
1.fakeloader.css
为加载指示器的基本样式加载样式表(加载覆盖和加载微调器)。
<link rel="stylesheet" href="fakeloader.css">
2. 为加载指示器创建 HTML。
<div id="fakeloader-overlay" class="visible incoming">
<div class="loader-wrapper-outer">
<div class="loader-wrapper-inner">
<div class="loader"></div>
</div>
</div>
</div>
3.fakeloader.js
在 jQuery 之后加载 JavaScript 。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous"></script>
<script src="fakeloader.min.js"></script>
4. 在文档准备好时初始化插件。完毕。
$(function(){
window.FakeLoader.init();
});
5. 确定是否自动隐藏加载指示器(默认:true)。
window.FakeLoader.init({
auto_hide: true
});
6.自定义淡入淡出动画的持续时间。
window.FakeLoader.init({
fade_timeout: 200
});
7. 自定义选择器加载指示器。
window.FakeLoader.init({
overlay_id: 'fakeloader-overlay'
});
8. 使用 jQuery waitForImages 插件时配置插件。
window.FakeLoader.init({
wait_for_images: true,
wait_for_images_selector: 'body'
});
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。