Question

我正在寻找实现这一目标的最佳解决方案：我正在开发一个以wordpress儿童为主题的网站。我希望在从页面切换到另一页面时对我的预加载器/微调器产生一个fadeIn效果，并且我希望此微调器仅在加载整个目标页面时才淡出（无论如何，我不希望显示css的呈现导致此特定主题缓慢）。这是我已经尝试过的：

要生成预加载器的设计，我在body标记后和我插入的functions.php中立即在header.php中有一个自定义钩子“ wp_hook_body”：

add_action('wp_hook_body','preloader',999999);
function preloader(){
    ?>
<div class="dp_preloader">
    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
<style>
.dp_preloader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #ffffff;z-index: 999999;height: 100%;width: 100%;overflow: hidden !important;}
.lds-ring {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin: -50px 0px 0px -50px;}
.lds-ring div {box-sizing: border-box;display: block;position: absolute;width: 100px;height: 100px;border: 9px solid #ffd500;border-radius: 50%;animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color: #ffd500 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {animation-delay: -0.45s;}
.lds-ring div:nth-child(2) {animation-delay: -0.3s;}
.lds-ring div:nth-child(3) {animation-delay: -0.15s;}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
}

现在在我的页脚中，我已经通过wp_footer钩插入了该代码，以创建对预加载器的fadeIn效果：

    if ( !is_user_logged_in() ) {
    add_action('wp_footer', 'dp_preloader_fadein');
    function dp_preloader_fadein() {
    ?>
    <script>
//this selector is to select all links except anchors and menu elements with nolinks
    jQuery('a:not([href*="#"]):not(.menu-item-has-children > a:first-child)').click(function(e) {
    e.preventDefault();
    newLocation = this.href;
    jQuery('.lds-ring').fadeIn(100, function() { 
                jQuery('.dp_preloader').fadeIn(100, newpage);
                });
    });
    function newpage() {
    window.location = newLocation;
    };
    </script>
    <?php
    }
    }

现在我认为这是错误的：为了在页面完全加载时获得淡出效果，我在页脚中插入了以下内容：

if ( !is_user_logged_in() ) {
add_action('wp_footer', 'dp_preloader_fadeout');
function dp_preloader_fadeout() {
?>
    <script type="text/javascript">
        jQuery(window).load(function(){ 
            jQuery('.lds-ring').fadeOut(100, function() { 
            jQuery('.dp_preloader').fadeOut(100);
            });
        })
<?php
}
}

好吧，这按预期工作，但我认为这不是使此工作正常的好方法，首先，微调器显然像已加载两次一样，并且当淡入时我将收到启动/停止效果停止并开始淡入淡出，接下来，如果淡入淡出效果为100ms，即使页面加载时间为100ms，也将变为200ms。所以问题是： 有没有一种方法可以在没有淡入淡出效果的情况下在页面之间切换，而无需加载两倍的预加载器？ 非常感谢

离开页面时淡入预加载器，完成加载时淡出

0 个答案: