预加载器不会停止，不会转换到主页面。

My preloader wont stop loading and it doesn't want to transition to the main page. The preloader is supposed to load for 3-4 seconds and then automatically transition to the page. I've tried removing things in the jquery/javascript. But I couldn't find an option that fixes it.

我的预加载程序不会停止加载，它不希望转换到主页面。预加载器应该加载3-4秒，然后自动切换到页面。我试过在jquery/javascript中删除一些东西。但是我找不到一个可以修复它的选项。

Also looked on the web for solutions, but none of them helped me.

也在网上寻找解决方案，但没有一个帮助我。

Thanks in advance for any help.

谢谢你的帮助。

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>

1 个解决方案

#1

Well, I'd recommend you read this: https://jquery.com/upgrade-guide/3.0/

嗯，我建议你读读这个:https://jquery.com/upgrade-guide/3.0/。

You are using jQuery 3, but you are using functions that have been deprecated since jquery 1.10+ or so.

您使用的是jQuery 3，但是您使用的函数是自jQuery 1.10+之后就已经弃用的。

.load() has been removed from jQuery 3. So has document ready.

.load()已从jQuery 3中删除。文档也准备好了。

Event

事件

Breaking change: .load(), .unload(), and .error() removed

中断更改:.load()、.unload()和.error()删除。

Breaking change: .on("ready", fn) removed

break change: .on(“ready”，fn)删除。

Breaking change: event.pageX and event.pageY normalization removed

断变化:事件。pageX和事件。pageY正常化了

Breaking change: jQuery.event.props and jQuery.event.fixHooks removed

打破改变:jQuery.event。道具和jQuery.event。fixHooks删除

Breaking change: Delegated events with bad selectors throw immediately

打破改变:用坏的选择器将事件立即抛出。

Deprecated: .bind() and .delegate()

弃用:.bind()和.delegate()

User the proper modern-day jQuery functions such as

用户使用合适的现代jQuery函数。

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

A little bit more information from the jQuery website to confirm:

来自jQuery网站的更多信息确认:

These methods are shortcuts for event operations, but had several API limitations. The event .load() method conflicted with the ajax .load() method. The .error() method could not be used with window.onerror because of the way the DOM method is defined. If you need to attach events by these names, use the .on() method, e.g. change $("img").load(fn) to $(img).on("load", fn).

这些方法是事件操作的快捷方式，但是有几个API限制。load()方法与ajax .load()方法冲突。错误()方法不能与窗口一起使用。onerror因为定义了DOM方法。如果您需要使用这些名称附加事件，请使用.on()方法，例如更改$(“img”).load(fn)到$(img)。(“负载”,fn)。

-- in response to the comments; if you want to just simply delay the loader's removal, it would go like this:

——回应上述评论;如果你只是延迟加载器的移除，它会这样:

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

-- Have you checked your console (f12 on windows) to see if there are no errors in it? -- Did you check in your source (ctrl + U on windows) whether the javascript is actually getting included properly?

——你检查过你的控制台(windows上的f12)，看看里面是否没有错误?——你是否检查了你的源代码(在windows上的ctrl + U)是否正确地包含了javascript ?

#1