Results 1 to 2 of 2

Thread: Looping through a few pages & preloading

  1. #1
    Join Date
    Jun 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Looping through a few pages & preloading

    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?

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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  == frame  1));

        
    elCurrent.setAttribute('style''display:block');
        
    elPrev.setAttribute('style''display:none');
       
        if (
    == 4) { 
            
    1
        } else {
            
    i++;
        }

        
    setTimeout(1000 delayInSecondstoggleIFrames);

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •