【手搓一个原生全局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>
相关推荐
摸爬滚打的小李2 分钟前
SameSite Cookie
前端
小毛驴8506 分钟前
Vue 传统全局引入方式,ES 模块化方式引入 对比
前端·javascript·vue.js
Sobeit7 分钟前
2025 年前端人必学!Tailwind CSS 全面解析与实战
前端
xianxin_13 分钟前
HTML CSS
前端
奇怪的知识又增长了18 分钟前
UILabel 字体缩放适应宽度
前端
萱萱的七彩鱼23 分钟前
css3之三维变换详说
前端·javascript·css3
遗憾随她而去.24 分钟前
前端css 的固定布局,流式布局,弹性布局,自适应布局,响应式布局
前端·css
liweisum34 分钟前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript
该用户已不存在34 分钟前
2025 年,Python工具别只知道Pycharm了
前端·后端·python
每天开心39 分钟前
噜噜旅游App(4)——搜索页面开发教程:热门推荐与关键词搜索模块
前端·前端框架