Gif stubbornly refusing to fade out even after the .fadeOut command is called

Having trouble making a gif fade out after the page loads? Here's my attempt so far:

I want the overlay, which includes a white background and the gif, to gradually become transparent once the rest of the page is fully loaded.

Take a look at the following code snippet, along with a link to a test page I've been working on:

Link to test the code

Any suggestions or ideas?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
          src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
          integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
          crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!

<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>

Here is the corresponding CSS:

#overlay {
    background-color: white;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
}

Answer №1

If you're using multiple versions of jQuery, consider making a change in your code to ensure it works properly. You can either delete the include for jQuery 3 or follow the suggestion below.

I recently made a contribution to a discussion about document-ready handlers on SO:Docs that is relevant here, especially for those transitioning to jQuery 3.

jQuery(function($) {
  // Make sure this code runs when the document is ready
  // The $ (first argument) will refer to jQuery internally
  // Avoid relying on $ as a reference to jQuery in the global namespace
});

All other document-ready handlers are considered deprecated in jQuery 3.0.

By implementing this doc-ready handler, your code should work correctly even if both versions of jQuery are included.

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

Selenium2: Exploring ways to retrieve error specifics after executeScript() encounters a failure

While facing certain idiosyncrasies with browsers, I often have to execute JavaScript commands during testing. Every now and then, Selenium returns an error stating that there was a JavaScript error without providing any specifics. Is there a method to re ...

Determine the latest date within each group and display the corresponding output value

I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...

Retrieve the added attribute value of a RadioButton using JQuery

Currently, I am faced with a frustrating issue. On my website, I have a RadioButton to which I added an attribute as shown below: in ...asp <div id="radio" class="C_Radio"> <asp:RadioButton id="rad1" GroupName="typeSelect" runat="server" ...

Error message indicating a problem with the locator By.linkText that contains dots in Selenium: TypeError - Invalid locator

I've searched through other resources for solutions, but I can't find anything that addresses my specific issue. The error message I'm encountering is TypeError: Invalid locator. Here's a snippet of my code (where I suspect the problem ...

Exploring the world of JSON on the internet

Hello there! I'm currently working on a project similar to . However, I am facing difficulties when integrating my code with a discord bot. I am questioning whether it is possible to host JSON data online directly with the code snippet below: documen ...

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

Imagine two functions, A and B, both interacting with a MySQL database using connection.query(...) methods. Function A utilizes a while loop to navigate through the response it receives. Subsequently, function B is invoked with the response from function ...

Javascript files saved as post meta are failing to load on Wordpress pages

I am facing an issue with my site's load time and storing JavaScript for each page. All my attempts to load JavaScript stored as metadata have been unsuccessful. Whenever I try to load the JavaScript, it displays <script> </script> with a ...

adjusting the font color based on the currently selected tab

After seeking help for my previous question on Unable to add a background colour to the button in navigation I have successfully resolved that issue and continued working, but now I am facing a new challenge. I need to change the font color of the navigat ...

Easily transforming data between JSON and CSV formats in JavaScript using user-defined headers

Can someone provide guidance on creating import/export functionality for CSV format without using external libraries? It would be a huge help! I have a CSV string labeled as "A": "First Name,Last Name,Phone Number\r\nJohn,Doe,0102030405&bso ...

Retrieving a function's output in React

Upon attempting to retrieve and log the res.data from my function, I encountered an issue where it returned as undefined. However, when I logged it from within the function, the result appeared normal. const getDefaultState = () => { axios .get ...

How to make a straightforward task list using ExpressJS

As a beginner, I am attempting to create a basic todo list using ExpressJS. Currently, my goal is to simply display some hardcoded todos that I have in my application. However, I seem to be struggling to identify the mistake in my code. Any assistance woul ...

Encase a group of child elements within a parent container using

Currently, I am able to wrap an entire li-element in an ordered list with a link: $(e).wrap('<a href="#" onclick="window.open(\'/xyz/\');return false;"></a>'); This is the HTML construct: <li class=""> ...

What is the process for incorporating a personalized validation function into Joi?

I have a Joi schema and I am trying to incorporate a custom validator to validate data that cannot be handled by the default Joi validators. Currently, my Joi version is 16.1.7 const customValidator = (value, helpers) => { if (value === "somethi ...

What are a few common methods for using JQuery to create an Ajax request?

In the past, I relied on the ASP.NET update panel control for Ajax operations. However, I have since been advised that using JQuery is a more effective way to make Ajax calls. Can anyone provide me with information on popular methods for making Ajax call ...

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

Utilizing JSON encoding in PHP to populate a dropdown menu

How can I update a select dropdown with dynamic data every few seconds using PHP and JavaScript? I have a PHP script that retrieves an array of numbers from 1 to 10 and returns it as a JSON response. However, when I try to update the select dropdown with ...

deactivating image mapping on mobile media screens

I'm looking to disable my image map on mobile screens using media queries. I've attempted to include some javascript in the head of my html file, but I encountered an error: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></s ...

Update the appearance based on the dimensions of the parent container with Bootstrap

Here's the situation I'm facing on my webpage: <div id="myDiv"> <p>A</p> <p>B</p> </div> If 'myDiv' is narrower than width X, display A & B vertically. Otherwise, display A and B horizo ...

Creating a webpage header with Javascript to mimic an existing design

I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...

What is the best way to incorporate a background image that complements my content?

I'm currently working on revamping my friend's windsurf club website. The issue I'm facing is with trying to achieve a more elegant appearance by positioning a background image behind the <h1> and <h2> elements. Currently, I have ...