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

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

封装一个全局loading组件

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 组件

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

使用全局loading组件

<!-- 使用全局 loading 组件 -->
<global-loading></global-loading>