Articles

Navigation ( archives ›› 2010 ›› June ›› 10 ›› How to preload an IFrame ›› comments )

Comments on How to preload an IFrame

23 Replies: (add yours)

lneely

1

THANK YOU! This works wonderfully.

› Posted on June 27, 2010, 1:28 pm

Jean Paul

2

Hi,

It works perfectly to display text but I have tried several approaches to insert an image instead via the CreateObjectNode, and honestly can;t figure it out to work.

This is for a customer that has a map inside of an iframe, could you please point me out what I am missing to insert a gif image saying loading?

Thank you and kind regards,

JP

› Posted on August 5, 2010, 1:13 pm

m0

3

JP, to create an image is pretty easy, basically you replace:

newElement.appendChild(document.createTextNode('Loading ...'));

with an image instead:

var imgElement = new Image();

imgElement.src = 'http://www.google.com/images/logo_sm.gif';

newElement.appendChild(imgElement);

That will show an image node instead of a text node (Loading).

-Mohamed

› Posted on August 5, 2010, 10:34 pm

JP

4

Mohamed,

Thank you for taking the time to respond to my question.

Sincerely, YOU ROCK BIG TIME!! It works like a charm now.

:)

› Posted on August 6, 2010, 12:41 am

adam

5

Thanks for share~

› Posted on September 28, 2010, 3:20 am

Arya1024

6

I don't know if something like this works:

just adding this to your html head:

iframe {display:none;}

and having your iframe as:

› Posted on October 22, 2010, 9:48 pm

Arya

7

I don't know if something like this works:

just adding this to your html head:

iframe {display:none;}

and adding the following line to your iframe:

onload="this.style.display='block';"

› Posted on October 22, 2010, 9:50 pm

m0

8

Arya, yes that will definitely work! That is basically what I am doing :) But I am creating a "indeterminate" preloader, so that we can put a placeholder instead of making it blank. Such as "loading" text, or even a "loading" image.

› Posted on January 1, 2011, 1:56 am

cryoffalcon

9

Salam,

first of all thanks for making this, i really liked it, but i am not able to use it, as you have not described it well. As i don't know what div to make with what class or id, and you have two js over there where to put both and how. i tried to understand it through your page source but i failed as i am not good at hard things. I would really appreciate it if you guide me how to use it, i am a blogger.

and is there a way to put adsense into it as preloader instead of image or text. I am going to use this script of yours in a popup like lightbox, will the script work there too, as i previously used a script it works fine in pages, but doesn't work in popup. i would really appreciate your help, as you are my last resort.

thanks brother.

Regards.

› Posted on January 17, 2011, 11:16 am

cryoffalcon

10

i am very sorry for two post of comments, but it is done in mistake. i hope you understand.

› Posted on January 17, 2011, 11:17 am

cryoffalcon

11

Salam,

i am sorry for commenting too much, well i found the source code and method how to use it at your other website mohamedmansour.com

but i am facing a problem i-e i am using .swf file in iframe and your preloader continue to load and the loader stays and shows nothing, while i tried websites in iframe then it works perfect. Can you suggest me something, all i want to do is that when there is white blank screen and game has not started to load people see a preloader so that they could understand that there is a game loading. I googled but didn't find an answer.

here is the link where i am testing it.

letseedrop.blogspot.com/2011/01/testing-5.html

› Posted on January 17, 2011, 11:40 am

m0

12

Wassalam,

Basically, the script adds an "onload" event listener to the "iframe" tag. We specify an ID attribute for that "iframe" so that we can distinguish it from the other "iframe" tags.

When the "onload" event listener fires, it will hide the preloader and show the "iframe". The preloader DIV (section in a document), is completely separate than the "iframe" that is why we can hide and show the other.

Hence, you can add whatever you want in the "preloader" DIV. The preloader requires a "src" attribute to be present for the "iframe" tag, without it, you cannot add "onload" listeners. If you want to preload your Flash animations, you can follow my old tutorial, goo.gl/u1eqB, but you have to figure out how to load other flash content. The only way for your flash content to interact with the DOM is through Flash itself (I believe), it has to allow that.

› Posted on January 17, 2011, 1:00 pm

cryoffalcon

13

Salam,

Well first of all thanks for your quick reply. Well my iframe has an src containing .swf file in it, and iframe has an id to make it separate from others but still it won't work. And i am using external files in iframe, which means that i can't do changes to those flash files, but only to my iframe, so does your old method will work for me.

well i tried the below script it works but when i place this script inside a popup like lightbox, what happens is that the preloading text sits on the content and doesn't disappear, while if i don't use it in popup then it works fine.

function hideProgress(){

document.getElementById('loader').style.display = 'none';

}

wait please loading.....

Job Application

I would appreciate if you have any solution for me, as i am unable to continue building blog because of this, and the country where i live is filled with worthless people who don't know anything.

Take care.

› Posted on January 17, 2011, 1:15 pm

cryoffalcon

14

Salam,

first of all i only comment one time i don't know why it duplicates.

and if you want to see the other scrilpt which works without popup is in here, i pasted code but comments removed it as you can see above,

letseedrop.blogspot.com/2011/01/testing-2.html

› Posted on January 17, 2011, 1:18 pm

cryoffalcon

15

Salam,

well i noticed one thing and that is, that this preloader of yours work with extensions in iframe like

when if you give these in src of iframe:

http://www.example.com/img.jpg or http://www.example.com

but it doesn't support http://www.example.com/fun.html

or

http://www.example.com/flashlogo.swf

can you do something to it that it start supporting .swf extension.

thank you in advance.

› Posted on January 20, 2011, 10:50 am

cryoffalcon

16

Salam,

well i noticed one thing and that is, that this preloader of yours work with extensions in iframe like

when if you give these in src of iframe:

http://www.example.com/img.jpg or http://www.example.com

but it doesn't support http://www.example.com/fun.html

or

http://www.example.com/flashlogo.swf

can you do something to it that it start supporting .swf extension.

thank you in advance.

› Posted on January 20, 2011, 10:50 am

Fred

17

Hello Mohamed,

Thanks for your Iframe preloader. However it didn't quite work well for me, because the Iframe I use is as nearly as width as the content-DIV containing the frame and I ended up with layout troubles. Ending a GoogleMap showing the center of the original in the top-left corner of the frame. (after I altered the last display block line in your code to display inline or inline-block).

After reading these replies, and especialy the 7th one from Arya and a little bit of online tutorial (because I'm not a JavaScript man) I came up with a one line JavaScript solution resulting the same thing.

So I would like to inform you what I've done and maybe you'll like it.

The one line of JavaScript that fits well between the script tags in the header is:

function displayNone(){document.getElementById("loaded").style.display='none';}

The Iframe-tag gets the extra attribute: onload="displayNone()"

Then the parent content-DIV container with a positioned style relative can have a absolute positioned DIV with the ID="loaded" to be placed anywhere you like it. And with a z-index higher then the Iframe even on top of it.

The DIV can contain anything you like. And will disappear when onload function gets true.

It was your info and Arya's comment that gave me this idea.

Thanks,

Fred

› Posted on May 11, 2011, 9:25 am

Peter Giesbers

18

Hi Mohamed,

I have tried your script and it works perfect! HI replaced the loading text with an image and it is displayed in the upper left corner. No I want to display the image in the center of the screen (align and valign center), I know how to do this in CSS but I can't find a solution for Javascript. I hope you can help me with this.

› Posted on June 10, 2011, 9:33 am

Nuno Fernandes

19

Hi!

Thank you very much for this script. It works 100%.

I just need to center my animated gif, like Peter Giesbers asked. Is it possible?

Best Regards

› Posted on July 28, 2011, 12:27 pm

jan

20

Hi!

I just tried your script and it works great.

i have this script in my page.

[code]

page1

page2

Loading Video.

var preloader = new IFramePreloader('testFrame');

preloader.init();

[code]

as you can see i have two links. each page pa1.html and pa2.html have also an iframe code and the script and it works. But i think it is redundant to have iframe code in my main page and to the page i'm calling pa1 and pa2. My question is, is their a way that it is just the main page that will have the iframe code and not the pa1.html and pa2.html page.

I tried removing the iframe code in my pa1 and pa2 page and it didn't work.

› Posted on September 14, 2011, 11:26 am

jan

21

Sorry for posting twice. Here's the code im talking about

› Posted on September 14, 2011, 11:33 am

rob

22

seems to work just fine except I can't figure how to preload multiple frames.

› Posted on January 13, 2012, 3:57 am

Belabz

23

Choukran akhi, jazaka laho khayran.

Thanks brother.

› Posted on January 25, 2012, 10:55 am

Comment on This Article:

No HTML allowed, URIs will be auto-linked, line breaks converted to paragraphs - . Your email address will not show up on this page, I do not store addresses, nor will I give them awat. I hate spam too. (*) - Denotes Required fields!