I'm trying to figure out how to show a loading icon and switch to the iFrame once it's loaded. Is there some function like onclick
or something?
Basically what I'm trying to accomplish is to have a div appear saying "Loading..." and once the iFrame completely loads the page show the iframe. How can this be done?
You could set the initial frame content as just an animated gif for a loading icon and then load the actual document, separately, in an AJAX call. When the remote call completes it would replace the contents of the appropriate DOM element (e.g document.body
) with the fetched page.
I've solved this by setting an animated gif (from Ajaxload) on the iframe container's background image. The only consideration to take is that the iframe body should set a background color.
Whilst the iframe is loading, its background should be transparent and the icon should show through.