JQuery preload pages

Question

My problem is quite simple, i would like to preload pages before showing them in a div

i've got a main div in my index page :#data_div

i load pages with lot of images into that Div ... (not only images, lot of markup too)

i use another div to preload the page, that div is not visible (but not hidden neither to keep good formatting of data loaded ) : #data_loading ;

i use a div for loading symbol :#wait_div

i think i need the ajax equivalent of JQUERY load (event, not load method ) but i can't set this event to a div (...) so i need another solution

        $.address.change(function(event) {
                    $("#wait_div").show();

                    if(event.value == "/") {
                        $.address.value("index.php");
                    } else if(event.value.substr(1, 5) == "Datas") {
                        $("#data_loading").load(event.value, {
                            'ajax' : 'true'
                        },function(){

    /* i would like that this occur only when the page is fully loaded 
(including image and scripts) inside the temp div */
                           $("#data_div").children().remove();
                           $("#wait_div").hide();
                           $("#data_loading").children().appendTo($("#data_div")).fadeIn(1000);
                                //alert("done");
                            });
                        });
                    }
                });

Have a look at this question + answer [http://stackoverflow.com/questions/476679/preloading-images-with-jquery][1] [1]: http://stackoverflow.com/questions/476679/preloading-images-with-jquery — Nick, Nov 24 '11 at 21:06
thanks but i don't want to load individual images, just need that my div be fully rendered before showing it (that include scripts too) — guillaume, Nov 24 '11 at 21:08
does [this answer](http://stackoverflow.com/q/545005/829835) help at all??? ***hint*** *it should* - also look at the rest of the answers, they *mostly* all offer good advice. — rlemon, Nov 24 '11 at 21:35

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Check this answer to my question

Thant's how you know when all images are loaded you can give a class to the images inside your temp div and do something like this in your new page:

  $(document).ready(function(){
    var imgs = $("img.tempDivImages"), cnt = imgs.length;

    imgs
    .load(function(){
      if(!--cnt) {
        /* all images loaded */
        /* now call the function you want when everything is loaded*/
      }
    })
    .error(function() { /* whoops an image failed to load */});
  });

This is how you get to calla function or do something when everything inside your temp div is loaded.

score 0 · Answer 2 · edited May 23 '17 at 12:27

I answered this in another question (not jQuery but JavaScript):

Note: You can add a loading message in HTML and hide it at the end of preload() function.

JavaScript

function preload() {
    imageObj = new Image();
    images = new Array();
    images[0] = 'img/1.png';
    images[1] = 'img/2.png';
    images[2] = 'img/3.png';
    images[3] = 'img/4.png';
    images[4] = 'img/5.png';

    for (i = 0; i <= 4; i++)
        imageObj.src = images[i];
}

HTML

<body onload="preload();">
    ....

    <!--[if IE]>
        <div id="preload">
            <img src="img/1.png" width="1" height="1" alt="" />
            <img src="img/2.png" width="1" height="1" alt="" />
            <img src="img/3.png" width="1" height="1" alt="" />
            <img src="img/4.png" width="1" height="1" alt="" />
            <img src="img/5.png" width="1" height="1" alt="" />
        </div>
    <![endif]-->
</body>

CSS for IE

#preload {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Thanks for answering but i don't want to load images separatly, i just want to raise an event when my "page" is fully loaded... in the temp div ... — guillaume, Nov 24 '11 at 21:16

JQuery preload pages

2 Answers2