为了提升WEB网站的用户体验,有的时候,页面在预加载时需要显示一个提示正在加载中的预加载图标,等页面完全加载完之后预加载图标消失。Fakeloader插件可以很好地实现这一功能,本文简单介绍Fakeloader插件的使用方法。
Fakeloader页面加载效果代码,支持7种效果和自定义图片,兼容主流浏览器!
使用方法:
1、body中插入以下html代码
1 | <div id="fakeLoader"></div> |
2、head标签里嵌入
1 | <link rel="stylesheet" href="css/fakeloader.css"> |
3、引入js库
1 2 | <script src="js/jquery.min.js"> <script src="js/fakeloader.min.js"> |
4 调用fakeloader
1 2 3 | <script type="text/javascript"> $(".fakeloader").fakeLoader(); </script> |
5 选项解释
1 2 3 4 5 6 7 | $(".fakeloader").fakeLoader({ timeToHide:1200, //加载效果的持续时间 zIndex:"999",// spinner:"spinner1",//可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果 bgColor:"#2ecc71", //加载时的背景颜色 imagePath:"yourPath/customizedImage.gif" //自定义的加载图片,见demo8.html }); |
本文已通过「原本」原创作品认证,未经作者授权请勿直接转载,负责将依法追究其法律责任。
如果认为本文对您有所帮助请赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏