我正在尝试在我的主题上添加预加载器。当我在 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 文件中时,它不起作用。