WordPress Elementor预加载器显示异常问题排查求助

问题描述 #

使用WordPress的Elementor构建网站时，预加载器显示异常：网站内容会先短暂闪现数毫秒，随后预加载器才出现，之后才正常展示页面内容。已在主题文件编辑器中添加如下预加载器代码：

add_action('wp_footer', 'Allprocoding_Preloader');

function Allprocoding_Preloader() {
    if (!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php") {
        
        $delay = 1; // seconds
        $desktop_loader = 'https://spoky.co/wp-content/uploads/2024/02/Group-1171275193-1.gif';
        $mobile_loader = 'https://spoky.co/wp-content/uploads/2024/02/mobile-.gif';
        $overlayColor = '#ffffff';
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var preloader = document.createElement('div');
                preloader.style.position = 'fixed';
                preloader.style.top = '0';
                preloader.style.bottom = '0';
                preloader.style.left = '0';
                preloader.style.right = '0';
                preloader.style.backgroundColor = '<?php echo esc_js($overlayColor); ?>';
                preloader.style.zIndex = '100000';
                preloader.style.display = 'flex';
                preloader.style.alignItems = 'center';
                preloader.style.justifyContent = 'space-around';

                var loaderImg = document.createElement('img');
                loaderImg.src = '<?php echo esc_url($desktop_loader); ?>';
                loaderImg.alt = '';
                loaderImg.style.height = '30vw';

                preloader.appendChild(loaderImg);
                document.body.appendChild(preloader);

                document.body.style.overflow = "hidden";
                var mediaQuery = window.matchMedia("only screen and (max-width: 760px)");

                function handleMediaChange(event) {
                    if (event.matches) {
                        loaderImg.src = '<?php echo esc_url($mobile_loader); ?>';
                        loaderImg.style.height = '20vw';
                    } else {
                        loaderImg.src = '<?php echo esc_url($desktop_loader); ?>';
                        loaderImg.style.height = '15vw';
                    }
                }

                mediaQuery.addListener(handleMediaChange);
                handleMediaChange(mediaQuery);

                window.addEventListener("load", function () {
                    // Remove the preloader after the delay
                    setTimeout(function () {
                        preloader.remove();
                        document.body.style.overflow = "visible";
                    }, <?php echo esc_js($delay * 1000); ?>);
                });
            });
        </script>
        <?php
    }
}

排查与解决方法 #

• 将预加载器脚本移至wp_head钩子
  当前代码使用wp_footer钩子，脚本会在页面底部加载，导致页面先渲染内容后创建预加载器。改为add_action('wp_head', 'Allprocoding_Preloader');，同时移除document.addEventListener("DOMContentLoaded", ...)包裹，让脚本在页面阶段直接执行，确保预加载器第一时间插入DOM。

• 添加静态CSS隐藏初始页面内容
  在主题自定义CSS或内添加内联CSS，初始状态下隐藏页面主体内容，等预加载器加载完成后再显示：

  body.preloader-active .elementor, 
  body.preloader-active #page {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  

  然后在预加载器脚本开头为<body>添加preloader-active类，移除预加载器时再移除该类。

• 替换动态DOM创建为静态HTML结构
  不要用JS动态生成预加载器元素，直接在PHP中输出静态HTML和CSS，确保页面加载时预加载器已存在：

  add_action('wp_head', 'Allprocoding_Preloader');
  function Allprocoding_Preloader() {
      if (!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php") {
          $delay = 1;
          $desktop_loader = 'https://spoky.co/wp-content/uploads/2024/02/Group-1171275193-1.gif';
          $mobile_loader = 'https://spoky.co/wp-content/uploads/2024/02/mobile-.gif';
          $overlayColor = '#ffffff';
          ?>
          <style>
              .preloader {
                  position: fixed;
                  top: 0;
                  inset: 0;
                  background-color: <?php echo esc_attr($overlayColor); ?>;
                  z-index: 100000;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin: 0;
              }
              .preloader img {
                  height: 15vw;
              }
              @media only screen and (max-width: 760px) {
                  .preloader img {
                      height: 20vw;
                  }
              }
              body.preloader-active .elementor, 
              body.preloader-active #page {
                  visibility: hidden;
                  opacity: 0;
              }
          </style>
          <div class="preloader">
              <img src="<?php echo esc_url($desktop_loader); ?>" 
                   alt="" 
                   data-mobile="<?php echo esc_url($mobile_loader); ?>" 
                   data-desktop="<?php echo esc_url($desktop_loader); ?>">
          </div>
          <script>
              document.body.classList.add('preloader-active');
              const mediaQuery = window.matchMedia("only screen and (max-width: 760px)");
              const loaderImg = document.querySelector('.preloader img');
              
              function handleMediaChange(event) {
                  loaderImg.src = event.matches ? loaderImg.dataset.mobile : loaderImg.dataset.desktop;
              }
              
              mediaQuery.addListener(handleMediaChange);
              handleMediaChange(mediaQuery);
              
              window.addEventListener("load", function () {
                  setTimeout(function () {
                      document.querySelector('.preloader').remove();
                      document.body.classList.remove('preloader-active');
                      document.body.style.overflow = "visible";
                  }, <?php echo esc_js($delay * 1000); ?>);
              });
          </script>
          <?php
      }
  }
  

• 检查Elementor优化设置
  进入Elementor → 设置 → 性能，查看是否启用了「优化加载」「延迟渲染」「字体加载优化」等选项，暂时关闭这些设置测试，确认是否是Elementor的优化导致页面内容提前渲染。

• 排查主题与插件冲突
  暂时禁用所有非Elementor的插件，切换至Hello Elementor默认主题，测试预加载器是否正常。若恢复正常，再逐个启用插件和原主题，定位冲突来源。

内容的提问来源于stack exchange，提问作者mehtab fatima