Looping through a few pages & preloading [Archive]

16vminimike

06-08-2012, 01:06 PM

Hi, i'm trying to find a solution to a client request. I need a web page that loops through 3-4 predefined pages. These pages are coming from a report server and as such take a few seconds to generate so i'd like the pages to be preloaded before being displayed to avoid the 'loading, please wait' while it generates the report.

I've got a simple javascript that loops through the reports in an iframe, but cant sus out how to prefetch each one.

Any clues?

ApacheTech

06-09-2012, 04:30 AM

The way I could think of doing it off the bat is to load all four in seperate iframes then toggle the display: block | none; for the frames in order rather than the src of a single iframe. That way, each frame will only be needed to load once for every full page refresh, rather than each time it's displayed.

<body onload="toggleIFrames();">
<iframe id="frame_1" src="/path/to/page1.html" style="display:block"></iframe>
<iframe id="frame_2" src="/path/to/page2.html" style="display:none"></iframe>
<iframe id="frame_3" src="/path/to/page3.html" style="display:none"></iframe>
<iframe id="frame_4" src="/path/to/page4.html" style="display:none"></iframe>
</body>

Javascript:

var frame = 1;

var delayInSeconds = 30;

function toggleIFrames() {
var elCurrent = document.getElementById('frame_' + frame );
var elPrev = document.getElementById('frame_' + (frame == 1 ? 4 : frame - 1));

elCurrent.setAttribute('style', 'display:block');
elPrev.setAttribute('style', 'display:none');

if (i == 4) {
i = 1;
} else {
i++;
}

setTimeout(1000 * delayInSeconds, toggleIFrames);
}

This uses a recursive Javascript function to toggle the display of each iFrame over a set amount of time.

This should mean that all four iframes are preloaded and displayed separately through the delayed toggle. It will effectively preload the three frames that aren't displayed at first and hide them by setting the display to none.

This is a very crude way of doing it though. There may be better ways.