【手搓一个原生全局loading组件解决页面闪烁问题】

页面闪烁效果1
页面闪烁效果2

封装一个全局loading组件

js 复制代码
class GlobalLoading extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.init();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .loading-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(255, 255, 255, 0.9);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 9999;
                }

                .loading-spinner {
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #3498db;
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;
                    animation: spin 1s linear infinite;
                }

                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
            <div class="loading-overlay">
                <div class="loading-spinner"></div>
            </div>
        `;
    }

    init() {
        window.addEventListener('load', () => {
            setTimeout(() => {
                this.shadowRoot.querySelector('.loading-overlay').style.display = 'none';
            }, 500); // 延时 500 毫秒
        });
    }
}

customElements.define('global-loading', GlobalLoading);

引入全局 loading 组件

html 复制代码
<!-- 引入全局 loading 组件 -->
<script src="./components/global-loading.js" defer></script>

使用全局loading组件

html 复制代码
<!-- 使用全局 loading 组件 -->
<global-loading></global-loading>
相关推荐
然我14 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing16 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心18 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟18 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟18 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun18 分钟前
Promise 基础使用
前端·javascript·promise
Codebee19 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路22 分钟前
GIS 空间关系:九交模型
前端
xiguolangzi29 分钟前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
用户68238060322531 分钟前
前端会用到的数据结构--堆(HEAP)
前端