CODEWITHSUNDEEP
jquerycss
Sam
Sam

Reputation: 500

Loading pages with jQuery

I have an image heavy website, and to improve the loading of it, I have implemented a loading screen. At the moment, it is a white overlay with this css:

#loader{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999999999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('loader.gif') 50% 50% no-repeat rgb(255,255,255);
}

This is the jQuery that I have at the moment:

$(window).load( function(){

    $("#loader").fadeOut("slow");

});

At the moment this loading screen loads at the same time as the rest of the website, and it looks messy.

How would I be able to only load the rest of the page once the loading page it loaded and displayed?

Upvotes: 3

Views: 191

Answers (3)

ashique
ashique

Reputation: 155

Try the following-

  1. Load the initial page. Keep the loading screen invisible at this stage.
  2. Load the loading screen using jQuery.
  3. Load images using ajax.
  4. On success, Hide fadeout loading screen.
  5. On success, display the images. Codes would be as follows:
# 
#loader{
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 9999999999999999;
 display: none; // make it invisible initially
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: url('loader.gif') 50% 50% no-repeat rgb(255,255,255);
}

Jquery:

 $(function(){
     $("#loader").show();

     $.ajax(
      url: "url_to_process_ajax.php",
      type: "GET",
      data: "get=images",  // send image request to server
      success: function(data){
        // validate and process images
        // after completing image processing, fadeout loader and display the image area.
        $("#loader").fadeOut("slow", function(){
          $("#image_container").show("fast");
        });
      }
     );

});

Upvotes: 0

Juank
Juank

Reputation: 6196

Using the solution in jQuery callback on image load (even when the image is cached) this:

$(window).load( function(){
    var totalImages = $('img').length, // count how many images are in the page
        loadedImages = 0; // keep track of how many have loaded

    // listen to the load event on every image only one time
    $("img").one("load", function() {
        loadedImages++;  // when an image loads, increment the counter
        if (loadedImages == totalImages){
            // the number of images loaded equals the number of total images in the page
            // we can consider the loading process finished here
            $("#loader").fadeOut("slow");     
        }
    }).each(function() {
        // some images might have already loaded, eg. from cache
        // iterate over all of them and if the property 'complete' exists
        // manually fire the load event above
        if(this.complete) $(this).load();
    });
});

Upvotes: 3

Victor
Victor

Reputation: 5121

If your site has a lot of images, the best thing to do is load your images using ajax, after the rest of your page is loaded. Your page will load much faster using this approach.

Upvotes: 0

Related Questions