页面加载到结束的 全局 loading
程序员文章站
2024-03-13 23:43:46
...
<script src="../pace/pace.min.js"></script>
<script>
function loadJsCss(filename, filetype) {
if (filetype == "js") {
var fileref = document.createElement('script')//创建标签
fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src", filename)//文件的地址
}
else if (filetype == "css") {
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined") {
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
var cssStr = [
"../pace/pace-theme-barber-shop.css",
"../pace/pace-theme-big-counter.css",
//圆弹跳
"../pace/pace-theme-bounce.css",
"../pace/pace-theme-center-atom.css",
"../pace/pace-theme-barber-shop.css",
"../pace/pace-theme-center-circle.css",
//圆环旋转
"../pace/pace-theme-center-radar.css",
//进度条 没有数
"../pace/pace-theme-center-simple.css",
//右上角 大圆
"../pace/pace-theme-corner-indicator.css",
"../pace/pace-theme-fill-left.css",
//顶部进度 加 小圆
"../pace/pace-theme-flash.css",
"../pace/pace-theme-flat-top.css",
//进度条 带数值
"../pace/pace-theme-loading-bar.css",
"../pace/pace-theme-mac-osx.css",
//react
"../pace/pace-theme-minimal.css",
];
//4 为进度条 带数值
//11 类似于 react
function Num() {
var len = cssStr.length * 1;
var num = Math.random() * len;
return Math.floor(num);
}
console.log(Num())
loadJsCss(cssStr[Num()], "css"); //打开页面时浏览器动态的加载css 文件
</script>
基于pace.min.js