Loading pages with jQuery

Question

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?

Have you tried putting the CSS specific to the loader in a `` tag in your `` before other CSS files so it is instantly available to the browser? You can also go further and embed your `loader.gif` in the CSS with [Base64](http://www.hongkiat.com/blog/css-encoded-image/) — LeBen, Jul 30 '14 at 17:21
you can initialize and load an iframe once your page is ready — Saksham, Jul 30 '14 at 17:22
The browser loads files in the order you include them on your website. So, if you want to have something loaded faster, place it first. There is no need to delay loading other stuff as the browser can load in parallel multiple files, thus stopping this feature might actually slow your website. — XCS, Jul 30 '14 at 17:25
@Cristy yes but the idea is to pause the loading of the rest of the page for a split second whilst the loading page is completely loaded, and then load the rest of the page which takes much longer to load - especially for people with slow internet — Sam, Jul 30 '14 at 17:27
I fail to see the problem. http://jsfiddle.net/8U9Z8/ (maybe you need to re-run at the first time) — Nico O, Jul 30 '14 at 17:41
Yes because you have replaced the gif with loading text - suppose I could just do the same..... — Sam, Jul 30 '14 at 17:48

score 3 · Accepted Answer · edited May 23 '17 at 12:29

3

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();
    });
});

edited May 23 '17 at 12:29

Community

1
1

answered Jul 30 '14 at 17:45

Juank

6,096
1
28
28

what does this do exactly? – Sam Jul 30 '14 at 18:00
Added comments describing the flow SAMTHEMAN999 basically the #loader will be shown. Then js will grab every image on the page and check if it is loaded. When all images are loaded, remove the .#loader – Juank Jul 30 '14 at 18:07
sweet it has been implemented – Sam Jul 30 '14 at 18:20
marked as correct answer because it was the closest to getting what I had initially wanted, and it makes a difference to what I had already. – Sam Jul 30 '14 at 18:51
In terms of UX, think that if users have to wait too long before seeing something on the page, especially without anything displaying the progress of the loading, they might leave. If your problem is all about image loading, I’d rather go for a [lazy loading](http://dinbror.dk/blazy/) solution. There’s a lot of other jQuery plugins, simply Google it. – LeBen Jul 31 '14 at 05:55

score 0 · Answer 2 · edited Jul 30 '14 at 17:50

0

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.

edited Jul 30 '14 at 17:50

neatnick

1,489
1
18
29

answered Jul 30 '14 at 17:37

Victor

5,043
3
41
55

and how would I go about doing this? – Sam Jul 30 '14 at 17:55
1

You should offer some sort of example for the OP – Adjit Jul 30 '14 at 18:10

score 0 · Answer 3 · edited Jul 30 '14 at 18:29

Try the following-

Load the initial page. Keep the loading screen invisible at this stage.
Load the loading screen using jQuery.
Load images using ajax.
On success, Hide fadeout loading screen.
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");
        });
      }
     );

});

Loading pages with jQuery

3 Answers3