CODEWITHSUNDEEP
jquery
Happy G
Happy G

Reputation: 59

Loader before jQuery page load

I am trying to create a loader to be visible until the document is fully loaded, but the loader dissapear before page fully loaded.

<div  class="loader">
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>

and the js used is :

    $("#continut").load("fbapp.php");
    $(window).load(function () {
        $('.loader').fadeOut();
    });

Any ideea why the loader is fading out before the #continut is loaded ?

Upvotes: 0

Views: 316

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

$().load(url) makes an ajax call - ie asynchronous.

Your window has finished loading, but the additional ajax call has not. window does not get events from ajax load.

You can use the 'done' part of load, as in:

$("#continut").load("fbapp.php", function () {
    $('.loader').fadeOut();
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

window.load does not take in to account AJAX requests, only external CSS files, images etc. To do what you require, use the callback of the load() method:

$("#continut").load('fbapp.php', function () {
    $('.loader').fadeOut();
});

Upvotes: 2

Related Questions