I'm having an issue with my preloader - it refuses to fade out and seems stuck in

Currently, I am working on a website and have implemented a preloader to fade in and display the content. However, I am facing an issue where the preloader is not fading as expected and instead continuously loops. Can anyone offer guidance on how to achieve the fading effect successfully? The version of jQuery I am using is 3.2.1. Below is the code snippet I have utilized - 

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

});
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
<body>
  <div id="preloader"></div>
  <p>
    This is the page
  </p>
</body>

javascriptjqueryhtmlcss

Answer №1

Well done with your code! To enhance it, simply include 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
within your code structure

jQuery(document).ready(function($) {
  $(window).load(function() {
    $('#preloader').fadeOut(5000, function() {
      $(this).remove();
    });
  });

});
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="preloader"></div>
  <p>
    This is the page
  </p>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting the image source for each image in a table using VB.net

Is it more efficient to loop through the img src of various cells using a For Each loop and set their src based on another value (x) by directly referencing the img src attributes in code, or would embedding the table in a control higher up the hierarchy ...

htmlvb.net

Personalizing the hues of text in WordPress

Embarking on my coding journey, I have delved into online courses and now aim to enhance my skills by constructing a Wordpress Child Theme. As I delve further into customization, I encounter the dilemma of text color alteration through two main methods: ...

csswordpress

What is the right way to send an array using $.post method?

Below is the array I am working with: arr[0]='A'; arr[1]='B'; .... I attempted to send it using the following code: $.post('data.php',arr,function() { }); However, the desired functionality was not achieved. ...

jqueryarrayspost

The vue transition elements vanish while in the midst of the animation phase

While using Vue Transition during page navigation, I encountered a problem. Involving a table with components, when transitioning to a new page, some components from the table disappear, causing the table to re-render and blink mid-transition. It took me s ...

javascriptvue.jsvuetify.js

How can I construct a tree structure in JavaScript using JSON data when calling a function?

http://jsfiddle.net/2kwkh2uL/5498/ Here's a code snippet I've been experimenting with, attempting to create a jsTree through a JavaScript function call. However, it seems like the tree is not being built as expected. When I load the code normal ...

javascriptjqueryjsonjstree

Retrieving Controller Data in AJAX Response with Rails 5

After researching numerous articles on this topic, I find myself more confused than enlightened. The various approaches to the same task in Rails have left me feeling overwhelmed. The traditional method of handling AJAX calls involves: JavaScript listeni ...

javascriptruby-on-railsajaxruby-on-rails-5

Is there a way to transform a stringified array into an array in JavaScript if I do not have access to the original string?

Recently, I encountered a challenge where I had an array of items enclosed within "", and not '' (if that distinction matters): "['item 1', 'item2', 'item 3']" I am interested in converting it to ...

javascriptnode.jsarraysjson

Encountering a 404 error when utilizing ngx-monaco-editor within an Angular application

I have been encountering an issue while attempting to utilize the editor within my Angular 8 application. Despite researching similar errors on Stack Overflow and GitHub discussions, I haven't found a solution yet. Here's how my angular.json asse ...

javascriptangulartypescriptmonaco-editor

Do not return true from a nested function in JavaScript for form validation

After successfully creating a function to validate a form, I realized that breaking it down into three separate functions would be more beneficial. The challenge arose when attempting to return the 'false' message back to the form after splittin ...

javascriptforms

Output PHP code within the HTML content using javascript's innerHTML functionality

I wrote a PHP function that increments by +1 every time it is executed. function count_likes(){ $collect=file_get_contents('like_counter.txt')+1; $count=file_put_contents("like_counter.txt", $collect); echo $collect; I also have a JavaScr ...

javascriptphp

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...

javascriptphpjqueryhtmlcss

Aligning/spacing the items in a list vertically

Is it possible to add vertical spacing between specific <li> tags in a navigation list using CSS only, without relying on JavaScript or JQuery? For example: http://jsfiddle.net/ssqnY/ The spacing should adjust responsively based on the height of th ...

jqueryhtmlcss

Creating a powerful JavaScript/jQuery function that effectively adds a thousands comma separator for large numbers (10^6 and above) whenever a key is pressed up

After researching various solutions for formatting user input strings to include comma separators when typing large numbers such as 9999999999 --> 9,999,999,999, I came across multiple discussions here on stack overflow: How to print a number with comm ...

javascriptjquery

How to Use Django to Load a Text File into an HTML File with the Help of

I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...

javascripthtmljquerydjango

Refresh highcharts with the latest data inputs

Enhance stacked column charts by introducing new stacks through multi-select from the dropdown menu. I attempted to use new Highcharts.chart(...), but the new stacks are not being displayed. Even after recreating it, the previous chart persists. However, u ...

javascriptjqueryjsonchartshighcharts

Interplay between Node.js and a Website

I have a node.js app running on my computer that receives items from steam users. I want the app to send the item information to a website to store in a database. The challenge is that my website host doesn't allow remote SQL connections, so I can&apo ...

phphtmlnode.jsrequestxmlhttprequest

Show information retrieved from the database in a formatted table

I've been spending a considerable amount of time attempting to create a simple table populated with data from a database, but I'm struggling. The table should have two rows and three columns, each containing a piece of data. I know that the $row[ ...

phphtmlsql

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

javascriptangularjsangulartypescriptwebpack

Guide to smoothly transition the highlighted <tr> element to the top of the scroll bar

Is there a way to utilize jQuery for animating a selected row to the top of a div with a specific scrollbar style? #sc { border:1px solid black; width:450px; height:80px; overflow:scroll; } <div id="sc"> <table id=&quo ...

javascriptjquery

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

javascriptjqueryhtmlcss