Search code examples
javascriptjqueryiframe

How to display loading message when an iFrame is loading?

I have an iframe that loads a third party website which is extremely slow to load.

Is there a way I can display a loading message while that iframe loads the user doesn't see a large blank space?

PS. Note that the iframe is for a third party website so I can't modify / inject anything on their page.

Solution

  • I have done the following css approach:

    <div class="holds-the-iframe"><iframe here></iframe></div>

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}