jQuery代码报错及页面预加载器无法自动消失问题求助

Hey there! Let's get that preloader working properly for you. I took a look at your code and found a syntax error that's causing the red cross in Brackets and stopping the preloader from disappearing. Let's fix this up step by step.

The Core Issue in Your jQuery Code #

Your self-invoking function was missing a closing parenthesis at the end—this is why Brackets is showing that red error marker. Additionally, nesting the window.load event inside document.ready is redundant: window.load already waits for all page assets (images, stylesheets, fonts, etc.) to fully load, so we can simplify the structure to make it cleaner and more efficient.

Corrected Full Code #

HTML

<div class="preloader">
  <div class="status">
    <div class="status-mes"></div>
  </div>
</div>

CSS

.preloader {
  background: #fff;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}

.status-mes {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -40px;
  font-size: 10px;
  text-indent: -12345px;
  border-top: 5px solid rgba(0, 0, 0, 0.08);
  border-right: 5px solid rgba(0, 0, 0, 0.08);
  border-bottom: 5px solid rgba(0, 0, 0, 0.08);
  border-left: 5px solid #ffb900;
  border-radius: 50%;
  -webkit-animation: spinner 700ms infinite linear;
  animation: spinner 700ms infinite linear;
  z-index: 10000;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Corrected jQuery

(function($) {
  'use strict';

  $(window).on('load', function() {
    $('.status').fadeOut();
    $('.preloader').delay(350).fadeOut('slow');
  });
})(jQuery);

What Changed? #

1. Fixed the syntax error: Added the missing closing ) at the end of the self-invoking function to resolve Brackets' error marker.
2. Removed redundant nesting: Took the window.load event out of document.ready since window.load already ensures all page content is loaded before running—this streamlines the code without changing its functionality.

Now, when your page finishes loading completely, the spinner (.status) will fade out immediately, and after a 350ms delay, the full preloader overlay (.preloader) will fade out slowly, just as you intended.

内容的提问来源于stack exchange，提问作者Rahul Sharma