Is there a way to create a loading screen but cap the time before it fades away?

Question

I am trying to create an HTML loading screen, concealing a large number of images until they are at least partially loaded.

The following lines of code currently work but because of the size of the images, I need a way to cap the amount of time the browser spends trying to preload.

$(window).load(function(){
    $("#loadingScreen").fadeOut("slow");
    $('#content').fadeIn("slow");
});

In trying to do so, I added the following:

$("#loadingScreen").delay(3000).fadeOut("slow");
$('#content').delay(3000).fadeIn("slow");

My rationale is that the browser will first try to load all the images and after 3 seconds, even if the images are not fully loaded, the loading screen will disappear. This way, when one first visit to the site, he or she will spend a maximum of 3 seconds on the loading screen and in subsequent visits, he or she will spend even less time because the images will have been cached onto their computer.

Individually, both sets of code work but when I try to use them together, only the second set of code runs. What am I doing wrong? Thanks!

Markup:

<body>
    <div id="loadingScreen">
        <img src="img/loadingIcon.gif">
    </div>

    <div id="content" style="display: none">
        <img src="img/image1.jpg">
        <img src="img/image2.jpg">
        <img src="img/image3.jpg">
    </div>
</body>

Answer 1

Have you tried:

$("#loadingScreen").delay(3000).fadeOut("slow", function(){
    $('#content').fadeIn("slow");
});

Is there a way to create a loading screen but cap the time before it fades away?

Question

1 answers

solution1
0 2013-01-11 00:29:54

Is there a way to create a loading screen but cap the time before it fades away?

Question

1 answers

solution1 0 2013-01-11 00:29:54

solution1
0 2013-01-11 00:29:54