Question

У меня есть раздел на нашем сайте, который загружается довольно медленно, так как он делает несколько интенсивных звонков.
Любая идея, как я могу заставить div сказать что-то похожее на «загрузку», чтобы показать, пока страница готовится, а затем исчезнуть, когда все будет готово?

mehyaa · Answer 1 · 01 сентября 2010

Мне это нужно, и после некоторых исследований в Интернете я придумал это (нужен 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 на свою страницу (желательно в конце вашей страницы, прежде чем закрывать тег <body>, конечно):

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

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

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

Dariusz J · Answer 2 · 07 октября 2012

window.onload = function(){ document.getElementById("loading").style.display = "none" }

#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}

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

Изображение загрузки страницы с самым простым эффектом затухания , созданным в JS:

Victor Stoddard · Answer 3 · 19 января 2017

Этот скрипт добавит div, который будет покрывать весь экран при загрузке страницы. Он покажет загрузочный счетчик только для CSS автоматически. Он будет ждать, пока окно (не документ) завершит загрузку, а затем будет ждать дополнительные несколько секунд.

Работает с jQuery 3 (у него новое событие загрузки окна)
Изображение не требуется, но его легко добавить
Изменить задержку для большего количества брендинга или инструкций
Только зависимость - это jQUery.

Код загрузчика CSS от https://projects.lukehaas.me/css-loaders

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}

        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }

This script will add a div that covers the entire screen as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Rinoy Ashokan · Answer 4 · 17 июля 2017

У меня есть еще одно простое решение, которое отлично сработало для меня.

Прежде всего, создайте CSS с именем Lockon класс, который является прозрачным наложением вместе с загрузкой GIF, как показано ниже

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

Теперь нам нужно создать наш div с этим классом, который покрывает всю страницу как оверлей, когда страница загружается

<div id="coverScreen"  class="LockOn">
</div>

Теперь нам нужно скрывать этот титульный экран всякий раз, когда страница готова, и чтобы мы могли запретить пользователю нажимать / запускать любое событие, пока страница не будет готова

$(window).on('load', function () {
$("#coverScreen").hide();
});

Приведенное выше решение будет хорошо при загрузке страницы.

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

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

Это означает, что когда мы нажимаем эту кнопку печати (что займет много времени, чтобы предоставить отчет), он покажет наш экран обложки с GIF, который дает результат , и как только страница будет готова выше активируется функция загрузки окон, которая скрывает экран обложки после полной загрузки экрана.

Amber · Answer 5 · 06 декабря 2009

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

Jitendra Patel · Answer 6 · 17 октября 2017

Мой блог будет работать на 100 процентов.

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

<div class="loader">

btelles · Answer 7 · 06 декабря 2009

Ну, это во многом зависит от того, как вы загружаете элементы, необходимые для «интенсивного вызова», я изначально думал, что вы выполняете эти загрузки через 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();
});

rybo111 · Answer 8 · 04 марта 2016

Вот jQuery, который я в конечном итоге использовал, который отслеживает все запуск / остановку ajax, поэтому вам не нужно добавлять его к каждому вызову ajax:

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

CSS для загрузки контейнера и контента (в основном из ответа Мехья), а также класс hide:

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

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

HTML:

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>

Steve Harrison · Answer 9 · 06 декабря 2009

Создайте элемент <div>, содержащий ваше сообщение о загрузке, присвойте <div> идентификатор, а затем, когда ваш контент завершит загрузку, скройте <div>:

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

... или простым JavaScript:

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

Francisco Presencia · Answer 10 · 04 июня 2014

На основе ответа @mehyaa, но намного короче:

HTML (сразу после <body>):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS:

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

Javascript (jQuery, так как я уже использую его):

$(window).load(function() {
  $('#loading').remove();
  });

Как показать Div загрузки страницы, пока страница не закончила загрузку

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 10 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как показать Div загрузки страницы, пока страница не закончила загрузку

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 10 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов