WordPress頁面加載器

我正在創建一個WordPress網站。我想添加一個頁面加載器。頁面加載器的工作原理（我使用CSS創建的）。我在標題中添加了一個div。但是，頁面加載完成後頁面加載程序不會隱藏/消失。這導致我的頁面處於非活動狀態，因爲我的意思是，一旦頁面加載器仍然位於所有內容的「頂部」，我就無法點擊我網站上的任何內容。WordPress頁面加載器

// WP JQuery wrapper 
 
jQuery(document).ready(function ($) { 
 
\t //***** Page Loader Call ***** // 
 
\t $(document).ready(function() { 
 
     $(.'se-pre-con').animate(); 
 
    }); 
 
\t 
 
\t $(window).load(function() { 
 
     $('#loader-wrapper").hide(); 
 
    }); 
 
    }

#loader-wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
} 
 
.se-pre-con { 
 
    display: block; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: -75px 0 0 -75px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #3498db; 
 
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
.se-pre-con:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    right: 5px; 
 
    bottom: 5px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #e74c3c; 
 
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 
     animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
.se-pre-con:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    right: 15px; 
 
    bottom: 15px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #f9c922; 
 
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 
     animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
@-webkit-keyframes spin { 
 
    0% { 
 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(0deg); /* IE 9 */ 
 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(360deg); /* IE 9 */ 
 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(0deg); /* IE 9 */ 
 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(360deg); /* IE 9 */ 
 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
}

<body <?php body_class(); ?>> 
 

 
\t \t <div id=loader-wrapper> 
 
\t \t \t <div class="se-pre-con"></div> 
 
\t \t </div> 
 
</body>

來源

2016-11-09 Leroy

你可以試試這個，

添加在WP的header.php

<div id=loader-wrapper> 
     <div class="se-pre-con"></div> 
</div>

下在你的CSS文件

.hidden { 
    display: none !important; 
}

在你的footer.php或任何文件

//on page loading hide the page loader 
    $(window).load(function(){ 
     $("#loader-wrapper").addClass("hidden"); 
    });

這裏添加以下代碼是小提琴： https://jsfiddle.net/6v7sccuf/12/

來源

2016-11-09 06:36:22

你有語法錯誤。在腳本中嘗試以下代碼

jQuery(document).ready(function() { 
    jQuery('.se-pre-con').animate(); 
}); 

jQuery(window).load(function() { 
    jQuery('#loader-wrapper').hide(); 
});

來源

2016-11-09 06:38:38

謝謝@Nilesh Yadav。 – Leroy

WordPress頁面加載器

回答

相關問題