Results 1 to 2 of 2

Thread: Trouble with iframe

  1. #1
    Join Date
    Sep 2006
    Thanked 0 Times in 0 Posts

    Default Trouble with iframe

    I have three iframes loading in a page with a lot of graphics.

    I need to do one of the following

    Get the iframes to load quicker or put a message in the space where the iframes go to advise page loading.

    Any clever ideas.


  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    You cannot speed the loading of images unless you make them of a smaller byte size. There are many ways to do this. Making their dimensions smaller via resizing and/or cropping, and optimizing their format and/or compression ratio. If you can be fairly certain that no one will need to see the pages with the images upon first entering your site, you could preload the images in the background as users visit other pages on the site.

    I've been playing around with (updating and adding my own front-end to) some code by Gerard Ferrandez that works very well at preloading selected images on a page while displaying a progress bar. Here is how that works - put this script as the first thing in the body of the page:

    <script type="text/javascript">
    /*Selective Image Preloading w/progress bar script  John Davenport Scheuer
     *This credit must remain for legal use
     *user name: jscheuer1  */
    if (document.getElementById&&document.images){
    document.write('<div id="imgDiv" style="visibility:hidden;position:absolute;top:-1000px;left:-3000px;">');
    //write out the images:
    for (var i_tem = 1; i_tem < 55; i_tem++)
    document.write('<img src="'+i_tem+'.png">\n');
    document.write('<img src="b1fv.png">');
    //end writing out images
    // <!-- adapted from crossbrowser images_loading_bar - Gerard Ferrandez - - Feb 2005 -->
    document.write('<div id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial, sans-serif;font-size:10px;color:#666666;background-color:inherit;left:-50px;top:-18px;">Loading...<\/span>\n');
    document.write('<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background-color:#333333;color:inherit;"><span id="LB1" style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background-color:#666666;color:inherit;"><\/span><\/span><\/div>');
    var m00=document.getElementById("imgDiv").getElementsByTagName("img"),m01=m00.length;function images_loading_bar(){var m02=0;for(var i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01){setTimeout("document.getElementById('LB0').style.display='none'",128);yourcode to run;} else setTimeout("images_loading_bar()", 64);};images_loading_bar();
    // <!-- end of adapted from images_loading_bar code -->
    In the blue section you will see two methods of writing out your images for the preload, the first two blue lines create a loop writing out tags for images that are numbered. The third blue line just writes one tag for one image.

    These image tags will never be displayed on the page, they are just to aid in the preloading of the images so, you can generate them anyway you want and they should only have their source attribute - no dimensions, style or other attributes.

    Now, what you do with this code is up to you. In your situation, I would suggest making the rest of the page be in a container division with its visibility set to 'hidden' and then when the preload is finished change that to visible. A code hook for what to do when the preload is finished is in red in the above. To see it scroll the above code block to the right.
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate


Posting Permissions

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