2016-09-04 2 views
1

Мой предварительный загрузчик не останавливает загрузку и не хочет переходить на главную страницу. Предзагрузчик должен загружаться в течение 3-4 секунд, а затем автоматически переходить на страницу. Я попытался удалить вещи в jquery/javascript. Но я не мог найти вариант, который его исправляет.Preloader не останавливается и не переходит на главную страницу

Также посмотрел в Интернете решения, но никто из них не помог мне.

Заранее благодарим за любую помощь.

jQuery(document).ready(function($) { 
 

 
    // site preloader -- also uncomment the div in the header and the css style for #preloader 
 
    $(window).load(function() { 
 
     $('#preloader').fadeOut('slow', function() { 
 
      $(this).remove(); 
 
     }); 
 
    }); 
 

 
});
.js div#preloader { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 999; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: visible; 
 
    background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; 
 
}
<?php 
 
/** 
 
* Maintenance mode template. This is shown to anyone that is logged out or not an administrator! 
 
* @package maintenance-mode 
 
* @copyright Copyright (c) 2016, ZartanLOL 
 
* @license GPL2+ 
 
*/ 
 
?> 
 

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset ="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="profile" href="http://gmpg.org/xfn/11"> 
 

 
    <link href="//fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet" type="text/css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
    <link rel="stylesheet" href="<?php echo plugins_url('assets/css/maintenance.css', dirname(__FILE__)); ?>"> 
 
    <link rel="stylesheet" href="<?php echo plugins_url('assets/css/mobile.css', dirname(__FILE__)); ?>"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script> 
 
    <script src="<?php echo plugins_url('assets/js/preload.js', dirname(__FILE__)); ?>"></script> 
 

 

 
    <title>Maintenance Mode</title> 
 
</head> 
 
<body> 
 
    <div id="preloader"></div> 
 
    <div class="maintenance-mobile"> 
 
    <div class="maintenance-mobile-text"> 
 
     <h1>Maintenance</h1> 
 
     <p>This website is currently undergoing scheduled maintenance. We will be back shortly! Sorry for the inconvenience.</p> 
 
    </div> 
 
    <div class="maintenance-container"> 
 
     <a class="maintenance-login" href="<?php echo wp_login_url(); ?>">Go to Login Page</a> 
 
    </div> 
 
    </div> 
 
    <div class="maintenance-container"> 
 
    <a class="maintenance-login" href="<?php echo wp_login_url(); ?>">Go to Login Page</a> 
 
    </div> 
 
</body> 
 
</html>

ответ

3

Ну, я рекомендую вам прочитать: https://jquery.com/upgrade-guide/3.0/

Вы используете JQuery 3, но вы используете функции, которые были устаревшими, так как JQuery 1.10+ или так ,

.load() был удален из jQuery 3. Так что документ готов.

Событие

Ломать изменение: .load(), .unload() и .error() удалены

Нарушение изменений: .На ("готов", Fn) удалены

Главные изменения: event.pageX и event.pageY нормализации удалены

Разрывная изменение: jQuery.event.props и jQuery.event.fixHooks удалены

Главные изменения: делегированных события с плохими селекторов бросить немедленно

Устаревшее: .bind() и .delegate()

пользователя собственные современные JQuery функции, такие как

$(function(){ // this replaces document.ready 
    $(window).on("load", function(){ 
    $('#preloader').fadeOut('slow', function() { 
     $(this).remove(); 
    }); 
    }); 
}); 

Немного больше информации с веб-сайта jQuery для подтверждения:

Эти методы являются ярлыками для событийных операций, но имеют несколько ограничений API . Метод eventload() противоречил методу ajax .load() . Метод .error() не может использоваться с window.onerror из-за способа определения метода DOM. Если вам нужно прикрепить событий этими именами, используйте метод .on(), например. изменение $ ("img"). load (fn) до $ (img) .on ("load", fn).

- в ответ на комментарии; если вы хотите просто задержать удаление грузчика, он бы так:

$(function(){ // this replaces document.ready 
    setTimeout(function(){ 
    $('#preloader').fadeOut('slow', function() { 
     $(this).remove(); 
    }); 
    }, 1500); 
}); 

- Вы проверили вашу консоль (f12 на окнах), чтобы увидеть, если нет ошибок в нем? - Вы проверили свой источник (ctrl + U на окнах), правильно ли включен javascript?

+0

Благодарим за информацию. Я довольно плохо с jquery. Вот почему. - Теперь у меня иногда возникает проблема, что страница загружается, и прелоадер исчезает, а иногда предварительный загрузчик просто продолжает вращаться. Что мне нужно сделать, чтобы всегда иметь нагрузку перед загрузчиком в течение 3 секунд и загружать ее только один раз в час или 2? – BPrepper

+0

@BPppper это более чем вероятно связано с кешированием. Видите ли, кеширование не всегда вызывает функцию '$ (window) .on (" load ")'. На самом деле это довольно плохая практика. Позвольте мне попытаться найти вам способ сделать это. Но да, вы могли бы просто сделать предварительный загрузчик в течение 3 секунд (хотя это ОЧЕНЬ долго, я бы не рекомендовал вам пройти более 1,5 секунд!) С помощью функции 'setTimeout(). см. это для получения дополнительной информации о 'setTimeout()': http://www.w3schools.com/jsref/met_win_settimeout.asp – NoobishPro

+0

О, могу ли я порекомендовать вас попробовать, помещая ваш javascript в нижний колонтитул вместо заголовка? После создания нескольких сотен веб-сайтов я заметил, что особенно ** google chrome ** имеет тенденцию испортить триггер javascript, когда они включены в заголовок. (сохраняйте jQuery в заголовке, но любой действующий скрипт в нижнем колонтитуле/перед тегом) – NoobishPro

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