How can I show a "loading" image and some text until the webpage is loaded

I have a <div> e开发者_开发知识库lement like below

<div id="dialog-box">
 <iframe id="Iframe"  src="http:\\blah.com" ></iframe>
</div>

How can I show a rotating image and some text like "opening shortly" until the <iframe> webpage opens in the <div>?

In order to achieve this you have to attach a load event handler to the iframe and also do not set the source of the iframe in the markup itself because before you attach the load event handler the event might get triggered.

Working demo. Instead of loading text you can replace it with spin image of your choice as a background or img tag.

Mark up

<div id="dialog-box">
 <iframe id="Iframe"  src="javascript:void(0);" ></iframe>
</div>
<div class="loading">
  <br /><br />
  <div>Loading...</div>
</div>

Js

function showLoading(){
  var $loading = $(".loading");
  var windowH = $(window).height();
  var windowW = $(window).width();

  $loading.css({
    position:"fixed",
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()),
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop())
  }).show();
}

function hideLoading(){
   $(".loading").hide();
}


    $(function(){
      showLoading();

      $("#Iframe").load(function(){
        hideLoading();
      }).attr("src", "http:\\blah.com");

    });

Css

.loading{
    width:200px;
    height:100px;
    background:#ccc;
    font-weight:bold;

}
.loading div{
    margin: auto 0px;
    text-align:center;
    vertical-align:middle;
}

<div id="dialog-box">
 <iframe onload="$('.loader').remove()" id="Iframe"  src="http:\\blah.com" ></iframe>
 <div class="loader">....your loading message here</div>
</div>

css (adjust accordingly to your requirements):

#dialog-box {
   position:relative
}

.loader {
   position:absolute;
   top:100px;
   width:300px;
   height:200px;
   left:100px
}

You can make some nice loading spinning GIFs to put in "loader" here: http://www.ajaxload.info/

Have a look at this javascript library, you could be surprised. It uses no images and works in all major browsers (even IE6)