如何用原生JavaScript在首页及其他页面实现加载器？

需求明确：首页加载器显示3秒后自动隐藏，其他页面的加载器等页面完全加载完成后立即隐藏。试过jQuery、PHP方案均无效，以下是修正后的可行实现方案：

现有代码的核心问题 #

• CSS属性名存在多余空格（比如justify - content应为justify-content），导致布局失效
• HTML注释与加载器ID对应错误（home-preloader注释标注为其他页面，实际应对应首页）
• JS执行时机可能早于DOM渲染，导致无法获取加载器元素

修正后的完整代码 #

HTML #

<!-- 首页加载器 -->
<div id="home-preloader" class="preloader">
    <img src="gif1" alt="首页加载中...">
</div>

<!-- 其他页面加载器 -->
<div id="page-preloader" class="preloader">
    <img src="gif2" alt="页面加载中...">
</div>

CSS #

.preloader {
    display: none; /* 默认隐藏，由JS控制显示 */
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.preloader img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* 如需不同背景色可单独设置 */
#home-preloader {
    background-color: #ffffff;
}

#page-preloader {
    background-color: #ffffff;
}

JavaScript #

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
    const homePreloader = document.getElementById('home-preloader');
    const pagePreloader = document.getElementById('page-preloader');

    if (window.location.pathname === '/') {
        // 首页逻辑：显示3秒后隐藏
        homePreloader.style.display = 'flex';
        setTimeout(() => {
            // 用过渡动画隐藏，提升体验
            homePreloader.style.opacity = '0';
            setTimeout(() => {
                homePreloader.style.display = 'none';
            }, 500); // 等待过渡动画结束
        }, 3000);
    } else {
        // 其他页面逻辑：页面完全加载后隐藏
        pagePreloader.style.display = 'flex';
        window.addEventListener('load', function() {
            pagePreloader.style.opacity = '0';
            setTimeout(() => {
                pagePreloader.style.display = 'none';
            }, 500);
        });
    }
});

关键修改说明 #

• CSS修复：移除属性名中的多余空格，默认隐藏加载器避免页面闪烁
• DOM加载判断：用DOMContentLoaded确保JS在DOM渲染完成后执行，解决元素获取失败问题
• 平滑过渡：利用CSS的opacity过渡动画替代直接修改display，优化用户体验
• 元素缓存：提前获取加载器元素，减少重复DOM查询开销

替代优化方案（可选） #

若不想维护两个加载器元素，可使用单个加载器配合类控制：

优化后的HTML #

<div id="preloader" class="preloader">
    <img id="preloader-img" src="" alt="加载中...">
</div>

优化后的JS #

document.addEventListener('DOMContentLoaded', function() {
    const preloader = document.getElementById('preloader');
    const preloaderImg = document.getElementById('preloader-img');

    if (window.location.pathname === '/') {
        preloaderImg.src = 'gif1';
        preloader.style.display = 'flex';
        setTimeout(() => {
            preloader.style.opacity = '0';
            setTimeout(() => preloader.style.display = 'none', 500);
        }, 3000);
    } else {
        preloaderImg.src = 'gif2';
        preloader.style.display = 'flex';
        window.addEventListener('load', () => {
            preloader.style.opacity = '0';
            setTimeout(() => preloader.style.display = 'none', 500);
        });
    }
});

内容的提问来源于stack exchange，提问作者Muhammad Zahid