Question

我有一个<div>元素，如下所示

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

在<iframe>打开<div>网页之前，如何显示旋转图像和“即将开放”等文字？

Answer 1

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

正在使用 demo 。您可以将其替换为您选择的旋转图片作为背景或img标记。

，而不是加载文字

标记

<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;
}

Answer 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（根据您的要求进行调整）：

#dialog-box {
   position:relative
}

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

你可以把一些漂亮的装载旋转GIF放到“装载机”中：http://www.ajaxload.info/

Answer 3

看看this javascript library，你可能会感到惊讶。它不使用任何图像，适用于所有主流浏览器（甚至是IE6）

如何在加载网页之前显示“加载”图像和一些文本

3 个答案: