View Full Version : Trouble with iframe

09-04-2006, 11:37 AM
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.


09-04-2006, 06:02 PM
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
*visit http://www.dynamicdrive.com/forums
*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 - www.dhteumeuleu.com - 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.