我要评论
1.创建一个css样式，用于显示loading动画。
<style lang="less" scoped>
.loading {
position: fixed;
z-index: 999;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.bg {
display: flex;
justify-content: center;
align-items: center;
width: 104px;
height: 104px;
background: url(@/assets/img/home/loading-bg.png) 0 0 / 100% 100%;
img {
width: 70px;
height: 70px;
margin-bottom: 8px;
}
}
</style>2.在html文件中添加loading元素:
<template>
<div class="loading" v-if="mainstore.isloading" @click="loadingclick">
<div class="bg">
<img src="@/assets/img/home/full-screen-loading.gif" alt="" />
</div>
</div>
</template>3.使用javascript，在页面加载完成后，隐藏loading元素:
<script setup>
//1.引入main.js
import usemainstore from "@/stores/modules/main";
const mainstore = usemainstore();
const loadingclick = () => {
mainstore.isloading = false;
};4.开发利用的是组件化开发，在main.js中存储的是数据（状态管理，使用的是pinia)
import { definestore } from "pinia";
const usemainstore = definestore("mian", {
state: () => ({
isloading: true,
)},
});
export default usemainstore;5.在request.js接口请求和响应拦截时做处理
import axios from "axios";
import { base_url, timeout } from "./config";
import usemainstore from "@/stores/modules/main";
const mainstore = usemainstore();
class hyrequest {
constructor(baseurl, timeout = 10000) {
this.instance = axios.create({
baseurl,
timeout,
});
// loading加载显示与隐藏 第二种写法拦截请求
//请求之前拦截
this.instance.interceptors.request.use(
(config) => {
mainstore.isloading = true;
return config;
},
(err) => {
return err;
}
);
// 响应之前拦截
this.instance.interceptors.response.use(
(res) => {
mainstore.isloading = false;
return res;
},
(err) => {
mainstore.isloading = false;
return err;
}
);
}
request(config) {
mainstore.isloading = true;
return new promise((resolve, reject) => {
this.instance
.request(config)
.then((res) => {
resolve(res.data);
// 第一种写法：loading加载显示与隐藏
// 请求结束后设置为false
mainstore.isloading = false;
})
.catch((err) => {
reject(err);
mainstore.isloading = false;
});
});
}
get(config) {
return this.request({ ...config, method: "get" });
}
post(config) {
return this.request({ ...config, method: "post" });
}
}
export default new hyrequest(base_url, timeout);附：js实现页面加载时带loading进度条
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.6.1.js">
</script>
/** * 页面加载完成后显示页面 */
function showpage(){ $('#divpageloading').remove();
$('#divpagebody').show(); }
</head>
<body onload="showpage();">
<div id="divpageloading">
<img src="pageloading.gif" style="max-width:90%"/ alt="js实现页面加载时带loading进度条" >
</div>
<div id="divpagebody" style="display:none;"> ……
</div>
</body>
</html>总结
到此这篇关于使用javascript实现页面加载loading动画的文章就介绍到这了,更多相关js页面加载loading动画内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论