Preloader doesn't stop and wont transition to main page

javascript php jquery html css

11,553

Well, I'd recommend you read this: 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.

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

Event

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

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

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

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

Breaking change: Delegated events with bad selectors throw immediately

Deprecated: .bind() and .delegate()

User the proper modern-day jQuery functions such as

$(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:

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).

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

11,553

Author by

BPrepper

Updated on June 09, 2022

Comments

BPrepper about 2 years

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.

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>

BPrepper almost 8 years

Thanks for the info. I'm pretty bad with jquery. SO that's why. - Now I sometimes have the problem that the page loads and the preloader dissapears and sometimes the preloader just keeps spinning. What would I need to do to always have the preloader load for 3 seconds and only load it once every hour or 2?
NoobishPro almost 8 years

@BPrepper this more than likely has to do with caching. You see, caching doesn't always trigger the $(window).on("load") function. It's quite bad practice, actually. Let me try and find you a way to do this. But yes, you could just do the preloader for a steady 3 seconds (though this is VERY long, I wouldn't recommend you go over 1,5 seconds!) with the setTimeout() function. see this for more information on setTimeout(): w3schools.com/jsref/met_win_settimeout.asp
NoobishPro almost 8 years

Oh, may I recommend you try while putting your javascript into the footer instead of the header? After building a few hundred websites, I noticed that especially google chrome tends to mess up javascript trigger times when they are included in the header. (keep jQuery in the header, but any functioning script in the footer/just before the </body> tag)
BPrepper almost 8 years

Ok, so I'm trying to use setTimeout(function(){ myWindow.close() }, 1500); but it doesn't work. I tried changing the function name. But it still loads permanently. I places this settimeout before the last });
NoobishPro almost 8 years

where did mywindow.close() come from? Shouldn't it just be ` $('#preloader').fadeOut()` within a function wrapper? Hold on, let me update my answer
BPrepper almost 8 years

I fixed it, the token on line 8 was too much, had to delete that. :)
NoobishPro almost 8 years

@BPrepper sorry, I forgot to remove the ending tag of the removed $(window).load(). I fixed it in my answer as well. So, does it work now?
Javier Olayo almost 4 years

I had the same problem but just on some devices for some reason, like an ipad. But using the "proper modern-day" example you gave made it work for me.