CODEWITHSUNDEEP
javascriptjquerycssiframeload
John Doe
John Doe

Reputation: 3671

How can I have a loading icon appear before an iframe is comepletely loaded?

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?

Upvotes: 1

Views: 1140

Answers (2)

maerics
maerics

Reputation: 156434

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.

Upvotes: 1

Phil
Phil

Reputation: 164809

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.

Upvotes: 3

Related Questions