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

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

封装一个全局loading组件

class GlobalLoading extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

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

    render() {
        this.shadowRoot.innerHTML = `
            
            

                

            
        `;
    }

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

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

引入全局 loading 组件

<script src="./components/global-loading.js" defer>script>

使用全局loading组件

<global-loading>global-loading>