Menu
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>
209
asked Dec 09 '25 04:12
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?
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
