loadingJS羽量级预加载动画插件

所属分类：UI-加载

12349 58 查看评论 (1)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：自制预加载动画插件在页面目标图片未加载完成时显示动画加载完成后自动隐藏和删除非常适用于活动H5和各类单页面

loading.js

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

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

快速使用

你只要引入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
wait	否	10000	加载超时时间
animateTime	否	1.5s	动画淡入淡出时间默认1.5s 建议不要超过delTime的时间否则动画未加载完元素就会被彻底删除
delTime	否	3000	完全删除动画元素时间(包括容器) 默认3000毫秒
callback	否	无	加载完成回调事件