使用加载器在页面之间平滑过渡 - jQuery fakeloader

使用加载器在页面之间平滑过渡 - jQuery fakeloader

版本:

浏览量:1161

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件git

推荐指数:

详细信息

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'
});
联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

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