Как я могу показать «загрузочное» изображение и текст до загрузки веб-страницы

Question

У меня есть элемент <div>, как показано ниже

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

Как я могу показать вращающееся изображение и некоторый текст, например, "скоро открывается", пока не откроется веб-страница <iframe> в <div>?

Answer 1

Чтобы достичь этого, вы должны прикрепить обработчик события load к iframe, а также не устанавливать источник iframe в самой разметке, потому что перед подключением обработчика события загрузки событие может быть запущено. 1002 *

Рабочая демо . Вместо загрузки текста вы можете заменить его на изображение по вашему выбору в качестве фона или тега 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

Взгляните на эту библиотеку JavaScript , вы можете быть удивлены. Он не использует изображения и работает во всех основных браузерах (даже IE6)

Answer 3

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