我怎样才能显示“;加载“;图像和一些文本，直到加载网页为止

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

本文关键字：加载 文本 网页 图像 显示      更新时间：2023-09-26

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

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

在<div>中打开<iframe>网页之前，我如何显示旋转图像和一些文本，如"很快打开"？

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

工作演示。您可以将其替换为您选择的旋转图像作为背景或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;
}

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

看看这个javascript库，你可能会大吃一惊。它不使用任何图像，适用于所有主要浏览器(甚至IE6(

相关文章：