loadingJS羽量级预加载动画插件

所属分类:UI-加载

 11789  58  查看评论 (1)
分享到微信朋友圈
X
loadingJS羽量级预加载动画插件 ie兼容12

loading.js

为你的网页添加图片加载进度动画 目标图片均加载完成后自动删除动画窗 原生Js 不依赖任何其它插件

如果你在使用过程中遇到问题或者有更好的建议,请联系我.

117770442-7f2d8f80-b267-11eb-95fb-9652a84e55de.png

快速使用

你只要引入js即可 无需引入任何其它文件

<script src="loading.js"></script>

在页面中提供一个容器给加载动画元素

<body>
  <div id="load"></div>
  ...
</body>

绑定容器ID并实例化即可 开箱即用

<script type="text/javascript">
    var load = new Load({
      el:'#load',//绑定元素容器
    })
</script>

详细配置参数

<script type="text/javascript">
    var load = new Load({
      el:'#load',//绑定元素容器
      hide:'#app',//隐藏元素选择器 在加载完成前将该选择器下的元素全部进行隐藏 加载完成后再进行显示 起到防止滚动的作用
      bindClass:'.load',//如果只想预加载有指定类名的图片就写这 不加则默认是自动预加载网页中的所有img
      wait:10000,//加载超时时间 默认10000毫秒
      animateTime:'1.5s',//动画淡入淡出时间 默认1.5s 建议不要超过delTime的时间 否则动画未加载完元素就会被彻底删除
      delTime:3000,//完全删除动画元素时间(包括容器) 默认3000毫秒
      callback:()=>{}// 加载完成回调事件
    })
</script>

参数必填默认描述
el绑定元素容器ID
hide隐藏元素选择器 在加载完成前将该选择器下的元素全部进行隐藏 加载完成后再进行显示 起到防止滚动的作用
bindClass如果只想预加载有指定类名的图片就写这 不加则默认是自动预加载网页中的所有img
wait10000加载超时时间
animateTime1.5s动画淡入淡出时间 默认1.5s 建议不要超过delTime的时间 否则动画未加载完元素就会被彻底删除
delTime3000完全删除动画元素时间(包括容器) 默认3000毫秒
callback加载完成回调事件

优化建议

  • 尽量保持loadingJS不被其它js嵌套

  • 尽量将你的其它的js写在loadingJS的callback(回调事件)中

  • 如果发现在加载动画中你依旧可以进行上下滚动 请为你的其它元素添加display:none;并将它的父容器类名写进hide参数 这样加载完后将自动显示隐藏元素

相关插件-加载

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 40355  381

JS简单进度条

再也不愁JS进度条了
  加载
 39340  332

jquery图片加载进度

图片异步加载进度表条
  加载
 53257  385

jquery播放进度条插件,可拖动

jquery插件播放进度条,可以拖动,可以控制,可设置时间
  加载
 51439  376

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    guchen 0
    2021/5/15 14:56:37
    原创不易,xdm别白嫖了😘 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复