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.
HTML Code:
<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:
PHP Code:
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.
Junior Coders
Looping through a few pages & preloading
Posting Permissions
Reply With Quote
Bookmarks