Как показать отделение Загрузки Страницы, пока страница не закончила загружаться

Question

Как показать отделение Загрузки Страницы, пока страница не закончила загружаться

я думаю, что это не possibe с IE, который можно попытаться использовать window.event.toElement, но это, dosn't работают с Firefox!

129

javascript jquery html dom

задан ROMANIA_engineer 4 May 2015 в 20:54

4 ответа

score 6 · Answer 1

По умолчанию для содержимого используется display: none , а затем есть обработчик событий, который устанавливает для него значение display: block или подобное после его полной загрузки. Затем возьмите div, который установлен на display: block с «Loading» в нем, и установите его на display: none в том же обработчике событий, что и раньше.

score 2 · Answer 2

Ну, это во многом зависит от того, как вы загружаете элементы, необходимые в «интенсивном вызове», я изначально подумал, что вы выполняете эти загрузки через ajax. В этом случае вы можете использовать опцию beforeSend и выполнить вызов ajax следующим образом:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

EDIT В этом случае я вижу использование одного из параметров 'display: block' / 'display: none' выше в сочетании с $ (document) .ready (...) от jQuery, вероятно, путь. Функция $ (document) .ready () ожидает загрузки всей структуры документа перед выполнением (, но не ожидает загрузки всех носителей ). Вы бы сделали что-то вроде этого:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});

score 1 · Answer 3

Создайте элемент

, содержащий ваше сообщение о загрузке, присвойте

идентификатор, а затем, когда ваш контент будет загружен , скройте

:

$("#myElement").css("display", "none");

... или в обычном JavaScript:

document.getElementById("myElement").style.display = "none";

1

ответ дан 24 November 2019 в 00:30

Мне это нужно, и после некоторых исследований в Интернете я придумал это (необходим jQuery):

Сначала сразу после тега body добавьте это:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Затем добавьте класс стиля для div и изображения в свой CSS:

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

И, наконец, добавьте этот javascript на свою страницу (желательно в конце вашей страницы, перед закрытием Тег конечно же):

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

Затем отрегулируйте положение загружаемого изображения и цвет фона загружаемого div с помощью класса стиля help.

Вот и все, работает отлично. Но, конечно же, у вас должен быть где-то ajax-loader.gif.

194