Display a div upon loading with the help of Jquery

Two divs are causing me trouble!

<div id="loader">
</div>

and

<div id="wrapper">
</div>

"The wrapper div is not located inside the loader div just to clarify."

This is my code:

$(window).bind("load",function() {
       $('#loader').css('display',none);
       $('#wrapper').css('visibility',visible);
    });

The goal of this script is to hide the loader div once the page has finished loading, and show the wrapper div that contains all the content. Initially, I set display:none in the wrapper's style.

As expected, the loader div is displayed until the page finishes loading (which I can tell from the mouse loading icon and the browser tab favicon), but the wrapper div remains hidden.

Any assistance would be much appreciated.

jquerycssloadingwrapper

Answer №1

Ensuring the $(document).ready() method is utilized to ensure that the page loads fully.

Implementing the code snippet below can assist with this...

$(document).ready(function(){
    $('#loader').css('display','none');
    $('#wrapper').css('display','block');
});

Answer №2

Try using the following code snippet:

$(document).ready(function() {
           $('#loader').hide();
           $('#wrapper').show();
});

Alternatively, you can use:

$(document).ready(function() {
           $('#loader').css('display','none');
           $('#wrapper').css('visibility','visible');
});

To see a working example, check out this fiddle: http://jsfiddle.net/33zch/

Answer №3

Some browsers, such as Firefox, will only show the event $(window).load() after successfully loading all elements (such as images), while in Chrome both $(window).load() and $(document).ready() are fired at the same time. Using $(window).load() can have potential issues in Firefox (and possibly other browsers too): if even one image on the page fails to load, then the event may not occur. It is important to use the correct syntax:

$('#loader').css('display','none');
$('#wrapper').css('display','block');

or

$('#loader').hide();
$('#wrapper').show();

Answer №4

This is the desired format:

$('#loader').hide();
$('#wrapper').show();

Answer №5

This method can be easily implemented.

Upon page load, hide the loader with $('#loader').hide();
Then show the wrapper using $('#wrapper').show();

Answer №6

You mentioned that initially the wrapper element was set to display:none;. How can it be visible by adding visibility:visible? It would be more effective to use display:block instead.

See Demo in Action

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

You may only insert a single image into a container

My goal is to display two images side by side with text centered between them. However, when I add the first image using CSS and the background property, I run into issues adding a second image as it overrides the first one. Placing the images directly in ...

htmlcssimagecss-position

displaying the outcome of the extended project in Ajax

I am currently working with a Java class that contains various functions. Each function is responsible for printing its result either in the console or on a web page, depending on how it was initiated. The structure of my class looks something like this: ...

javajqueryajaxjsp

Ensure that the div remains fixed at the bottom even when multiple items are added

Following up on the previous question posted here: Sorting divs alphabetically in its own parent (due to many lists) I have successfully sorted the lists alphabetically, but now I need to ensure that a specific div with a green background (class: last) al ...

javascripthtmljquery

json is failing to retrieve the correct information from the database array

I ran a query and received two rows of data, after testing it in phpadmin. However, when I checked Firebug, I could only view the information from one row. What might be causing this discrepancy? $data = mysql_fetch_assoc($r); } } head ...

phpjquerymysqljson

Steps to refresh my View following an Ajax Post request

Working in an MVC environment, I find myself calling a Controller method from my View. The Controller method conducts some validation checks and then returns to the same view with a faulty modelstate. However, despite expecting all of my validation fields ...

jqueryajaxasp.net-mvcasp.net-mvc-4razor

Ways to eliminate the existing image during an image upload process

When a user decides to change their profile picture, I want the link in the database to be updated and the new image moved to the upload folder. The code should also remove the previous image associated with that specific user from the upload folder. The ...

phpjqueryhtmlajaxpdo

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

Hey everyone, I'm looking to incorporate window.history.pushState into my website, but I'm unsure of how to go about it... What I'm aiming for is to have a page dashboard.php and update the URL to dashboard.php?do=edit&who=me, while loa ...

javascriptphpjqueryhtmlajax

Navigate through JSON data / adjacent data

Currently, I am iterating through a JSON object and generating a list of links. Check out the fiddle link: http://jsfiddle.net/jasonday/hzZ8j/ Each link is assigned an ID based on the storeID in the JSON data. My goal is to have a function that, when a ...

jqueryxmlajaxjson

jQuery no longer waits for all deferreds to resolve once it is done

Currently, I am working with multiple Backbone.js models that need to be fetched, and I want to execute a callback function once all the fetches have completed. One specific model needs to be fetched before the others so that its id can be retrieved. The c ...

jquerybackbone.jscoffeescript

The data returned by Jquery .ajax is not sufficiently helpful

There's a jQuery script in my file that goes like this: <script type="text/javascript"> $(document).ready(function(e){ $('#myButton').click(function(e){ var formdata = {name: 'Alan', hobby: 'boxing'}; ...

phpjqueryjson

Adding a class to the following DIV and smoothly transitioning the current one out can be achieved using a dynamic number of items in multiple instances

Is there a way to create a scalable CSS slideshow for text divs without using images? Here is the current HTML structure: <div class="mb-panel-container cf"> <div class="mb-panel-section mb-slider"> <div class="mb-panel active" ...

javascriptjqueryhtmlcssslideshow

What's the best way to align divs vertically in a compact layout?

Update The reason I require this specific behavior is to ensure that all my content remains in chronological order, both on the web page and in the HTML structure. This way, even if the layout collapses into a single column on smaller screens, the content ...

javascripthtmlcssvertical-alignment

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

Alert message in jQuery validation for the chosen option value

I am attempting to validate a combo box with the code provided below. Currently, I receive multiple alert messages even if one condition is true. My goal is to only display one alert message when a condition is met and highlight the other values in red. Th ...

javascriptjqueryhtmlcssvalidation

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

When loading dynamic content, I use the following method: $('#my-div').load('my.html'); The code inside my.html looks like this: <html> <head> </head> <body> <script> $(fu ...

javascriptjqueryhtmlajax

Obtain the URL value using jQuery and place it inside a <span> element

How can I insert a href value into the span tag like this? <p class="name"> <a download="adja-lo.pdf" title="adja-lo.pdf" href="http://localhost/MatrixDRSnews/apps/Matrix/server/php/files/adja-lo.pdf">adja-lo.pdf</a> </p> ...

javascriptjqueryhtmlhref

Adjust the dimensions of the MaterialUI Switch component manually

Struggling to resize a Material-UI Switch as the default size isn't suitable. Managed to increase the size, but now the behavior isn't ideal. It looks fine in its default state: However, when changing its state, it loses style: Unable to figu ...

htmlcssreactjsmaterial-ui

Update the text in a personalized dropdown menu when an option is chosen

After spending some time working on a customized dropdown with the use of CSS and Vanilla JavaScript (Plain JS), I encountered an issue while trying to select and update the dropdown text upon clicking an option: window.onload = () => { let [...opt ...

javascripthtmlcssecmascript-6dropdown

Is it possible for me to replicate this full-screen flash animation using jQuery?

I need some guidance on how to create an animation similar to the one on http://flatuicolors.com without using flash. When you click a color on the website, it triggers a full screen animation with text. I'm not asking for code, just ideas on how to ...

javascriptjqueryflashanimation

processing an array using ajax form submission

Trying to manage an array that is returned from a PHP file after submitting form data. The value of the data after form submission is = ARRAY but I am unable to use this array in any way. Any suggestions on how to handle this array? Javascript: $(&apo ...

phpjavascriptjquery