网站顶部显示预加载进度条preload.js
Posted haonanElva
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网站顶部显示预加载进度条preload.js相关的知识,希望对你有一定的参考价值。
网站加载的速度快的话,不会显示进度条加载时候的样式。
支持性主流浏览器都支持,ie浏览器需要9以上9也支持。
使用方法
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript"> $.QianLoad.PageLoading({ sleep: 50 }); </script>
/* */ $.QianLoad = { PageLoading: function(options) { var defaults = { delayTime: 500, //页面加载完成后,加载进度条淡出速度 sleep: 0, //设置挂起,等于0时则无需挂起 css: ‘<style>*{margin:0;}.load-wrap{width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff}#pre-load{position:fixed;top:0;height:2px;background:#2085c5;transition:opacity .5s linear}#pre-load span{position:absolute;width:150px;height:2px;-webkit-border-radius:100%;-webkit-box-shadow:#2085c5 1px 0 6px 1px;opacity:1;right:-10px;-webkit-animation:pulse 2s ease-out 0s infinite}@-webkit-keyframes pulse{30%{opacity:.6}60%{opacity:0}to{opacity:.6}}</style>‘ //进度条样式位置可以自己修改 } var options = $.extend(defaults, options); //在页面未加载完毕之前显示的loading html自定义内容 $(‘head‘).append(defaults.css); var _LoadingHtml = ‘<div class="load-wrap" style="width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff"><div id="pre-load">‘ + ‘<span></span>‘ + ‘</div></div>‘; //呈现loading效果 $("body").append(_LoadingHtml); //监听页面加载状态 document.onreadystatechange = PageLoaded; function PageLoaded() { var loadingMask = $(‘#pre-load‘); $({ property: 0 }).animate({ property: 98 }, { duration: 3000, step: function() { var percentage = Math.round(this.property); loadingMask.css(‘width‘, percentage + "%"); //页面加载后执行 if (document.readyState == "complete") { loadingMask.css(‘width‘, 100 + "%"); setTimeout(function() { loadingMask.animate({ "opacity": 0 }, options.delayTime, function() { $(this).remove(); $(".load-wrap").remove(); console.log(‘Loading has been successful‘); }); }, options.sleep); } } }); } } }
以上是关于网站顶部显示预加载进度条preload.js的主要内容,如果未能解决你的问题,请参考以下文章
带有 browserWindow 和 preload.js 的电子生成器。无法加载预加载脚本