Hi! I am new to this forum

Well, let me tell you about my problem:

I am using a tooltip js script that loads content from an External site on mousover event, displaying the external site on an iFrame.

I didn't use AJAX, in this case , as the desired content is from an External site, and I've read that AJAX is not -cross site compatible for security reasons. So I had to go this iFrame way, and load the custom dynamic content, pointing the iframe source to a php which gets the parameters through GET.


The problem: Dynamic content is displayed correcly. However the iframe takes too long to load and it's quite ugly to see it loading.
My wanted solution: When the tooltip appears, display a waiting gif until the iframe completely loads. Once the iframe finishes loading, hide the waiting gif, and show the hided iframe.

Seems pretty simple, but I don't know how...

One important point: the external site is MINE, so I can make any modifications to the php file. What I am doing in fact, is a js script that could be added to any site and display special content tooltips generated from my server.

I am not sure if I should check for onLoad event from js site, or check it from the php file itself?
Or should I do a more complicated solution where if my script is activated on Site A,
once the iframe is displayed, instead of loading the contents like html it calls an AJAX request for the dynamic content?


Also, is there a way for me to 'cache' the iframes, so that if there are two tooltips that contain the same query, I could cache the content in a js variable, via get innerHTML? I think this is impossible for security reasons.

I am quite puzzled on how to achieve my goal...

Any suggestions would be deeply appreciatted!
Thanks so much everyone!

Rod