我正在尝试在我的主题上添加预加载器。当我在 functions.php 中使用此代码时，它工作正常。但我对在 functions.php 上使用 CSS 和 JS 不感兴趣。请帮助我。add_action('init', '

我正在尝试在我的主题上添加预加载器。当我在 functions.php 中使用此代码时，它工作正常。但我对在 functions.php 上使用 CSS 和 JS 不感兴趣

请帮我。

add_action('init', 'Devnuru_Preloader');
function Devnuru_Preloader()
{
  if (! is_admin() &&  $GLOBALS["pagenow"] !== "wp-login.php") {

    $delay = 1;  //seconds
    $loader = 'http://devnuru.local/wp-content/uploads/2024/09/devnuru-spinner.svg';
    $overlayColor = '#ffffff';
    echo '<div class="Preloader"><img 

src="' . $loader . '" alt="" style="height: 150px;"></div>

 <style>
.Preloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: ' . $overlayColor . ';
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

<script>
document.body.style.overflow = "hidden";
document.addEventListener

("DOMContentLoaded", () => setTimeout( function() { 

document.querySelector("div.Preloader").remove(); 

document.body.style.overflow = "visible"; } , ' . $delay . ' * 1000));
</script>
';
  }
}

当我将 HTML 代码放在页脚中、将 CSS 代码放在主 CSS 文件中、将 JS 代码放在 JS 文件中时，它不起作用。