如何显示“加载”图像和一些文本，直到加载网页

I have a <div> element 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>?

在

3 个解决方案

#1

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.

为了实现这一点，您必须在iframe上附加一个load事件处理程序，并且不要在标记本身中设置iframe的源，因为在附加load事件处理程序之前，事件可能会被触发。

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

工作演示。代替加载文本，你可以用你的选择的自旋图像替代它作为背景或img标签。

Mark up

标记

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

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

Css

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

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

#2

<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):

css(根据您的要求进行相应调整):

#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/

您可以在http://www.ajaxload.info/这里制作一些漂亮的加载旋转gif文件，以放入“loader”中

#3

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

看看这个javascript库，你会大吃一惊的。它不使用图像，可以在所有主要浏览器(甚至是IE6)中使用

#1