基于CSS与JavaScript开发WordPress自定义预加载器及加载百分比计算咨询

嘿，我来帮你拆解这个问题！制作自定义预加载器其实没那么复杂，尤其是在WordPress里实现加载百分比，咱们一步步来：

先写基础的全屏遮罩和进度条样式，你可以根据自己的需求调整颜色、动画效果：

/* 全屏预加载容器 */
#custom-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 进度条容器 */
.preloader-progress-container {
    width: 60%;
    height: 4px;
    background-color: #eee;
    margin-top: 20px;
    border-radius: 2px;
    overflow: hidden;
}

/* 进度条 */
.preloader-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #2563eb;
    transition: width 0.2s ease;
}

/* 百分比文本 */
.preloader-percentage {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

关键是统计页面资源的加载进度，这里分两种情况处理：统计静态资源加载，以及监听页面整体加载状态。

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    const preloader = document.getElementById('custom-preloader');
    const progressBar = document.querySelector('.preloader-progress-bar');
    const percentageText = document.querySelector('.preloader-percentage');
    
    // 统计需要加载的资源：图片、样式表、脚本
    const totalAssets = document.querySelectorAll('img, script, link[rel="stylesheet"]').length;
    let loadedAssets = 0;

    // 资源加载完成时更新计数
    function updateProgress() {
        loadedAssets++;
        const percentage = Math.round((loadedAssets / totalAssets) * 100);
        progressBar.style.width = `${percentage}%`;
        percentageText.textContent = `${percentage}%`;

        // 所有资源加载完成后隐藏预加载器
        if (loadedAssets >= totalAssets) {
            setTimeout(() => {
                preloader.style.opacity = '0';
                setTimeout(() => preloader.remove(), 300);
            }, 500);
        }
    }

    // 给每个资源绑定加载监听
    document.querySelectorAll('img').forEach(img => {
        if (img.complete) updateProgress();
        else img.addEventListener('load', updateProgress);
        img.addEventListener('error', updateProgress); // 资源加载失败也算完成
    });

    document.querySelectorAll('script').forEach(script => {
        if (script.readyState === 'complete' || script.readyState === 'loaded') updateProgress();
        else script.addEventListener('load', updateProgress);
        script.addEventListener('error', updateProgress);
    });

    document.querySelectorAll('link[rel="stylesheet"]').forEach(style => {
        if (style.sheet) updateProgress();
        else style.addEventListener('load', updateProgress);
        style.addEventListener('error', updateProgress);
    });

    // 兜底处理：如果页面已完全加载但资源统计有遗漏
    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            if (loadedAssets < totalAssets) {
                progressBar.style.width = '100%';
                percentageText.textContent = '100%';
                setTimeout(() => {
                    preloader.style.opacity = '0';
                    setTimeout(() => preloader.remove(), 300);
                }, 500);
            }
        }
    });
});

在WordPress里添加代码，推荐用规范的方式，避免直接修改主题核心文件：

1. 添加HTML结构：
   打开你的主题header.php文件，在<body>标签的最顶部添加预加载器的HTML：

   <div id="custom-preloader">
       <span class="preloader-percentage">0%</span>
       <div class="preloader-progress-container">
           <div class="preloader-progress-bar"></div>
       </div>
   </div>
   

2. 添加CSS和JS到主题：

   • 把前面的CSS代码复制到主题的style.css文件末尾，或者在WordPress后台的「外观」→「自定义」→「额外CSS」里粘贴。
   • 把JS代码保存为custom-preloader.js文件，上传到主题的js文件夹（如果没有就新建一个）。然后打开主题的functions.php文件，添加以下代码来注册并加载脚本：

     function enqueue_custom_preloader() {
         wp_enqueue_script('custom-preloader', get_template_directory_uri() . '/js/custom-preloader.js', array(), '1.0', true);
     }
     add_action('wp_enqueue_scripts', 'enqueue_custom_preloader');
     

• WordPress的jQuery兼容：如果你的主题用了jQuery，而且是noConflict模式（WordPress默认就是），如果你的JS需要用到jQuery，记得把代码包裹在jQuery(document).ready(function($) { ... })里。
• 懒加载图片：如果你的WordPress站点用了图片懒加载（比如主题自带或插件），上面的统计可能会漏算懒加载的图片，这时候需要给懒加载图片的data-src或data-lazy属性绑定监听，或者等懒加载初始化后再统计。
• 禁用主题自带预加载器：如果你的主题已经有预加载功能，记得在主题设置里关掉，避免冲突。

要是你在调试的时候遇到具体问题，比如某个资源没被统计到，或者样式不生效，随时再细化提问！

内容的提问来源于stack exchange，提问作者Niyoj oli