Is it possible to load an entire web page before rendering it?

Question

I've got a web page that automatically reloads every few seconds and displays a different random image. When it reloads, however, there is a blank page for a second, then the image slowly loads. I'd like to continue to show the original page until the next page is loaded into the browser's memory and then display it all at once so that it looks like a seamless slideshow. Is there a way to do this?

Answer 1

is the only thing changing the image? if so it might be more efficient to use something like the cycle plugin for jQuery instead of reloading your whole page.

http://malsup.com/jquery/cycle/

Here is the JS needed if you used jQuery -

Say this was your HTML:

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

Here would be the needed jQuery:

$(function(){
$('div.pics').cycle();
});

no need to worry about different browsers- complete cross browser compatibility.

Answer 2

If you create two divs that overlap in the image area, you can load one with a new image via AJAX, hide the current div and display the one with the new image and you won't have a web page refresh to cause a the "bad transition". Then repeat the process.

If there's only a small number of images and they're always displayed in the same order, you can simply create an animated GIF.

Answer 3

If you're just changing the image, then I'd suggest not reloading the page at all, and using some javascript to just change the image. This may be what the jquery cycle plugin does for you.

At any rate, here's a simple example

<img id="myImage" src="http://someserver/1.jpg" />

<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;

function changeImage(){
    document.getElementById('myImage').src = imageList[listIndex++];
    if(listIndex > imageList.length)
        listIndex = 0; // cycle around again.

    setTimeout(changeImage, 5000);
};

setTimeout(changeImage, 5000);
</script>

This changes the image source every 5 seconds. Unfortunately, the browser will download the image progressively, so you'll get a "flicker" (or maybe a white space) for a few seconds while the new image downloads.

To get around this, you can "preload" the image. This is done by creating a new temporary image which isn't displayed on the screen. Once that image loads, you set the real image to the same source as the "preload", so the browser will pull the image out of it's cache, and it will appear instantly. You'd do it like this:

<img id="myImage" src="http://someserver/1.jpg" />

<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();

// when the fake image finishes loading, change the real image
function changeImage(){
    document.getElementById('myImage').src = preloadImage.src;
    setTimeout(preChangeImage, 5000);
};  
preloadImage.onload = changeImage;

function preChangeImage(){
    // tell our fake image to change it's source
    preloadImage.src = imageList[listIndex++];
    if(listIndex > imageList.length)
        listIndex = 0; // cycle around again.
};

setTimeout(preChangeImage, 5000);
</script>

That's quite complicated, but I'll leave it as an exercise to the reader to put all the pieces together (and hopefully say "AHA!") :-)

Answer 4

Back in the dark old days (2002) I handled this kind of situation by having an invisible iframe. I'd load content into it and in the body.onload() method I would then put the content where it needed to go.

Pre-AJAX that was a pretty good solution.

I'm just mentioning this for completeness. I'm not recommending it but it's worth noting that Ajax is not a prerequisite.

That being said, in your case where you're simply cycling an image, use Ajax or something like the jQuery cycle plug-in to cycle through images dynamically without reloading the entire page.