Question

Is it possible to load for a html page and then when its finished loading all elements including pictures it will then move on to that page?

for example the user starts at page1 and then page2 starts to load and then when page2 is finished loading it goes into page2? is this possible with only javascript or javascript libraries?

also page2 has like let say 20 pictures on it, so i want to load all of those pictures and the n display page2?

thanks in advance

Answer 1

Using jQuery it’s pretty trivial.

In page1.html have such <div>:

<div id="pnlPage2Container"></div>

Then have this code in page1:

$(document).ready(function() {
    var oContainer = $("#pnlPage2Container");
    oContainer.hide();
    oContainer.load("page2.html", function() {
         oContainer.show();
    });
});

This should do the following:

1. Hide the container.
2. Load page2 contents into the container while it’s hidden, so user won’t see it loading.
3. Only when contents finished loading the container will become visible.