How to display loading message when an iFrame is loading?

Some iframes that are loaded from outside sources, are loading very slow.

So we needed to add a loading message (gif) in order to display something until the iframe is fully loaded.

The best solution that we have used is:

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

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