【手搓一个原生全局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>