javascript - 在加载网页之前如何显示 "loading"图像和一些文本

Question

我有一个 <div>像下面的元素

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

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

Answer 1

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

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