WordPress Page Loader

Я создаю сайт WordPress. Я хочу добавить загрузчик страниц. Загрузчик страниц работает (я создал его с помощью CSS). Я добавил div в заголовке. Однако загрузчик страниц не будет скрываться/исчезать после полной загрузки страницы. Это приводит к тому, что мои страницы неактивны, поэтому я имею в виду, что я не могу нажимать на что-либо на своем сайте после его загрузки, поскольку загрузчик страниц все еще находится на «вершине» всего.WordPress Page Loader

// 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

Вы можете попробовать это,

Добавьте следующее в в.ч. 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

ответ

Смежные вопросы