BPrepper BPrepper - 1 month ago 7x
CSS Question

Preloader doesn't stop and wont transition to main page

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() {


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

* 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>
<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>
<div id="preloader"></div>
<div class="maintenance-mobile">
<div class="maintenance-mobile-text">
<p>This website is currently undergoing scheduled maintenance. We will be back shortly! Sorry for the inconvenience.</p>
<div class="maintenance-container">
<a class="maintenance-login" href="<?php echo wp_login_url(); ?>">Go to Login Page</a>
<div class="maintenance-container">
<a class="maintenance-login" href="<?php echo wp_login_url(); ?>">Go to Login Page</a>


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.


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() {

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
    $('#preloader').fadeOut('slow', function() {
   }, 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?