Log in

View Full Version : Iframe loading script


stefaneh
07-17-2007, 08:15 PM
Hello,

I am looking for a script which shows that the iframe page is loading. As have an iframe which content is quit large so the problem I have you open the site and see almost noting until the iframe is loaded. I like to put something there like a loading script like a script you see in flash or even some text

Any idea

Thanks

Stefan
djr33
07-18-2007, 04:59 AM
I can think of a couple approaches:

1. Do something to the included page. Load the image, or whatever it is, into javascript and replace the original content of the page (ie a loading message) with this content.

2. Create a script on the main page that displays "loading" somewhere on the main page. Note that this will need to go on the main page, not in the iframe.
Once the content is loaded in the iframe, use <body .... onLoad="something()">, and communicate to the original script that it can stop saying loading.

Alternatively, you could try to show loading in the place where the iframe is, and then change the iframe (originally hidden) to visible.

3. You could try to place content that says "loading" under the iframe, and have the iframe transparent. I'm not sure if this is possible, but it would be fairly easy if it worked. Look into iframe CSS properties and do some tests. If you can make it transparent, then simply have text or an image of "loading" under it (in a div, for example, as the background), then this will be covered once the iframe loads.
You could try a similar approach in the iframe itself, using "loading" as the background to then be covered up by the image that is loading, etc.
stefaneh
07-18-2007, 01:09 PM
Thanks for the answer. The iframe I am loading I can not edit its not my content so I try your number 2 approach. I was hoping you can point me in the direction where I can get like a scpit you see as no the Firefox tap ( spinning circle ) or like a &#37; numbers like on ( www.boulderinvest.com)
Thanks

Stefan
stefaneh
07-18-2007, 03:19 PM
I found a small script uploaded the flash and JS but now the preloader, no&#37; indicator is just spinning and the ifame will not load at all. Sorry I am just not so familiar with this kind of code. I copy the code I have below. Thank you Stefan


<div id="mainContent" align="center" >

<table width="100%">
<tr>
<td><div align="center">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent2.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
'width', '300',
'height', '300',
'src', 'DSCRIPTS Preloader 2',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'DSCRIPTS Preloader 2',
'bgcolor', '#ffffff',
'name', 'DSCRIPTS Preloader 2',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'DSCRIPTS Preloader 2',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="300" height="300" id="DSCRIPTS Preloader 2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="DSCRIPTS Preloader 2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="DSCRIPTS Preloader 2.swf" quality="high" bgcolor="#ffffff" width="300" height="300" name="DSCRIPTS Preloader 2" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
<iframe id="myframe"
djr33
07-18-2007, 03:23 PM
It's very difficult to get a percentage as that requires knowing how much data has been transferred to the user, especially when you don't really have access to the page anyway.

Using a rotating graphic is easy enough; just find one or make one.

After a google search, it seems that the onLoad property can be used for an iframe.
<iframe onLoad="javascript_here">
That seems like something worth looking into.
jscheuer1
07-18-2007, 03:29 PM
You could do something like what I did in my mybox script in its handling of iframe. The concept is simple:


Add a division absolutely positioned over the iframe.
Put your loading image, text, whatever in that division.
Add an onload event to the iframe that makes the loading division's style display property's value 'none'.


Oh, and to be kind to non-javascript enabled browsers, add this 'loading division' with javascript in the first place.
stefaneh
07-18-2007, 06:41 PM
hi John,

will try that just so fare no luck with the other version or better I am not that advanced I guess. I can see the loading image but is just not move from there and loads the iframe or better I guess its load but will not display just incase the code I am using right now


<div id="mainContent" align="center" >

<table width="100&#37;"><!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContentpre.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
'width', '300',
'height', '50',
'src', 'DSCRIPTS Preloader 2',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'DSCRIPTS Preloader 2',
'bgcolor', '#010101',
'name', 'DSCRIPTS Preloader 2',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'DSCRIPTS Preloader 2',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
id="simple_preloader" width="300" height="50">
<param name="movie" value="simple_preloader.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">

<embed name="simple_preloader" src="simple_preloader.swf" quality="high" bgcolor="#000000"
width="300" height="50"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>

</noscript>
<tr>
<td><div align="center">
<iframe id="myframe" src="http://iframes

As well the JS


<div id="mainContent" align="center" >

<table width="100%"><!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContentpre.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
'width', '300',
'height', '50',
'src', 'DSCRIPTS Preloader 2',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'DSCRIPTS Preloader 2',
'bgcolor', '#010101',
'name', 'DSCRIPTS Preloader 2',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'DSCRIPTS Preloader 2',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
id="simple_preloader" width="300" height="50">
<param name="movie" value="simple_preloader.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">

<embed name="simple_preloader" src="simple_preloader.swf" quality="high" bgcolor="#000000"
width="300" height="50"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>

</noscript>
<tr>
<td><div align="center">
<iframe id="myframe" src="http://iframes
jscheuer1
07-18-2007, 07:09 PM
You've got two identical code blocks there, at least I don't see any differences between them. As a result, I have no idea what your code really looks like or how you have it set up. Can you provide a link to a demo of your page without any attempt at creating a 'loading' image or division? I ask this because, until I see how that is setup, I won't know for sure if the idea I mentioned could work with it. The way you first asked your question made me think that each new video was a new page being loaded into the iframe. Now I am not too sure.
stefaneh
07-18-2007, 07:52 PM
Thanks John, forget about the last code I send I stick with your idea in post6 much easier for an amateur like me. However I don't really understand the onload code and I am sure I have them wrong. The page shows no the preloader object the iframe is loading ( I see it on the bottom of my browser) but the content of the iframe will not display nor the preload image will go away. My code so fare:

By the way love you supporting the IRC one of the best NGO's around

Stefan


<div id="mainContent" align="center" >

<table width="100&#37;">
<tr>
<td><div align="center">
<div id="preloader"><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
id="preloader"
width="300" height="50"
>
<param name="movie" value="preloader.swf">
<param name="bgcolor" value="#000000">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
name="preloader"
width="300" height="50"
src="preloader.swf"
bgcolor="#000000"
quality="high"
swliveconnect="true"
allowscriptaccess="samedomain"
>
<noembed>
</noembed>
</embed>
</object></div>

<iframe onLoad="preloader" id="myframe" src="http://iframes
jscheuer1
07-18-2007, 09:25 PM
Here's a working example of what I was talking about:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Iframe Loading Notice - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#holder, #holder iframe {
position:relative;
width:500px;
height:400px
}
#loading {
height:50px;
width:125px;
padding:1ex;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-63px;
display:none;
border:2px groove gray;
background-color:#cccccc;
color:#333333;
}
</style>
<script type="text/javascript">
var loadit=function(){
var f=document.getElementById('myframe'), l=document.getElementById('loading').style;
l.display='block';
if(f.onload==null){
f.onload=function(){l.display='none'};
if(window.attachEvent)
f.attachEvent('onload', f.onload);
}
return true;
}

</script>
</head>
<body>
<div id="holder">
<iframe id="myframe" name="myframe" src="about:blank" scrolling="auto" frameborder="1"></iframe>
<div id="loading">Loading . . .</div>
</div>
<a href="http://www.google.com/" target="myframe" onclick="return loadit();">Google</a><br>
<a href="http://www.dynamicdrive.com/" target="myframe" onclick="return loadit();">Dynamic Drive</a>
</body>
</html>
stefaneh
07-19-2007, 06:58 PM
John,

thanks for the script, it works on a normal site unfortunately not no my site but let me play around for few days before I border you again.

I the meantime I hope this script has not only a benefit to me but to few more guys on your site

Stefan
davorelli
04-30-2008, 10:36 PM
Here's a working example of what I was talking about:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Iframe Loading Notice - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#holder, #holder iframe {
position:relative;
width:500px;
height:400px
}
#loading {
height:50px;
width:125px;
padding:1ex;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-63px;
display:none;
border:2px groove gray;
background-color:#cccccc;
color:#333333;
}
</style>
<script type="text/javascript">
var loadit=function(){
var f=document.getElementById('myframe'), l=document.getElementById('loading').style;
l.display='block';
if(f.onload==null){
f.onload=function(){l.display='none'};
if(window.attachEvent)
f.attachEvent('onload', f.onload);
}
return true;
}

</script>
</head>
<body>
<div id="holder">
<iframe id="myframe" name="myframe" src="about:blank" scrolling="auto" frameborder="1"></iframe>
<div id="loading">Loading . . .</div>
</div>
<a href="http://www.google.com/" target="myframe" onclick="return loadit();">Google</a><br>
<a href="http://www.dynamicdrive.com/" target="myframe" onclick="return loadit();">Dynamic Drive</a>
</body>
</html>

Hi John,

Sorry to jump in like this, but is it possible to incorporate your script above into 'Ajax Tabs Content Script (v 2.2)/Demo #1/Tab 4'?
I've tried to work it in without success, but maybe is the lack of skill on my part. It would be a great help, 'cause without 'loading message' the user is staring into a blank container, while the external page is loading via iframe.

Thanks in advance.

Davor
nevdev
05-11-2008, 04:17 PM
Is there any way to do this as the page containing the iframe loads (as say, for a known slow-loading iframe) ?
xzone9
05-20-2008, 10:26 PM
I like this last example. What would the script look like showing the loader on page load instead of clicking on a link?