THANK YOU! This works wonderfully.
› Posted on June 27, 2010, 1:28 pm
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,
› Posted on August 5, 2010, 1:13 pm
JP, to create an image is pretty easy, basically you replace:
with an image instead:
var imgElement = new Image();
imgElement.src = 'http://www.google.com/images/logo_sm.gif';
That will show an image node instead of a text node (Loading).
› Posted on August 5, 2010, 10:34 pm
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
Thanks for share~
› Posted on September 28, 2010, 3:20 am
I don't know if something like this works:
just adding this to your html head:
and having your iframe as:
› Posted on October 22, 2010, 9:48 pm
just adding this to your html head:
and adding the following line to your iframe:
› Posted on October 22, 2010, 9:50 pm
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
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.
› Posted on January 17, 2011, 11:16 am
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
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.
› Posted on January 17, 2011, 11:40 am
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
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.
document.getElementById('loader').style.display = 'none';
wait please loading.....
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.
› Posted on January 17, 2011, 1:15 pm
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,
› Posted on January 17, 2011, 1:18 pm
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
can you do something to it that it start supporting .swf extension.
thank you in advance.
› Posted on January 20, 2011, 10:50 am
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).
So I would like to inform you what I've done and maybe you'll like it.
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.
› Posted on May 11, 2011, 9:25 am
› Posted on June 10, 2011, 9:33 am
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?
› Posted on July 28, 2011, 12:27 pm
I just tried your script and it works great.
i have this script in my page.
var preloader = new IFramePreloader('testFrame');
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
Sorry for posting twice. Here's the code im talking about
› Posted on September 14, 2011, 11:33 am
seems to work just fine except I can't figure how to preload multiple frames.
› Posted on January 13, 2012, 3:57 am
Choukran akhi, jazaka laho khayran.
› Posted on January 25, 2012, 10:55 am