Как показать страницу Загрузка div до тех пор, пока страница не закончит загрузку

5

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

источник

2009-12-05 22:28:29 Amber

+1

какое событие вы бы использовать, чтобы сделать это? Загрузка страницы Javascript? или есть лучшее место? – Miles

+0

Зависит от того, если у вас есть другой JS, делающий настройки для страницы - если это так, вызовите его после того, как это будет сделано, если нет, тогда документация onload работает нормально. – Amber

0

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

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

... или простой JavaScript:

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

источник

2009-12-05 22:34:45

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(); 
});

источник

2009-12-05 22:41:57 btelles

+0

К сожалению, это не через ajax, он ожидает, что php-скрипт подготовит данные из базы данных, поэтому некоторые из элементов html загружаются, а браузер ждет таблицу данных перед загрузкой остального. Что может выглядеть так, как будто страница застопорилась, поэтому нужно что-то показать там, чтобы показать, что «что-то происходит», а не заставлять пользователя уходить ... –

+0

FYI: Принцип работы сети (без аякса) заключается в том, что сервер отображает всю страницу serveride и по завершении отправляет этот результат (html) в браузер. Если рендеринг страницы остановлен где-то посередине (пока вы видите страницу, отображаемую в браузере), это не может быть php-скрипт, потому что php работает только с серверами. – Peter

+0

См. Мой ответ, чтобы избежать добавления 'beforeSend' и' success' для каждого вызова ajax. – rybo111

-1

Window.unload хорошо работает. Просто разместите это на своих страницах. (Пример использования JQuery):

<script type="text/javascript"> 
$(window).unload(function() { 
    var html = "<img src='html/loading.gif' />"; 
    $('#loading').append(html); 
}); 
</script> 

<div id="loading" />

источник

2010-05-18 12:21:05 Sire

155

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

Первый сразу после тега тела добавить:

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

Затем отрегулируйте положение погрузочных изображений и цвет фона загрузки DIV с классом помощи стиля ,

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

источник

2010-09-01 11:49:39 mehyaa

+2

при переадресации на другую страницу, она хранится на одной странице и неожиданно отображает нужную страницу, а затем: показывает панель загрузки на предыдущей странице перед загрузкой, а также на целевую страницу. window.onbeforeunload = function() {$ ('# loading'). Show(); } –

+0

+1 Это коротко, мило и ясно, мне это нравится. Однако я удалю этот div и оставлю только (; –

+2

занимает некоторое время, чтобы загрузить загружаемое изображение, пока страница не будет загружена уже – Elyor

18

JS:

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

CSS:

#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}

HTML:

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

Страница загрузка изображения с простейшим fadeout эффекта, созданного в JS:

источник

2012-10-07 10:14:57

0

на основе @mehyaa answe г, но гораздо короче:

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(); 
    });

источник

2014-06-03 23:14:17

+1

Лучше 'hide()' элемент, а не 'remove()' it, чтобы вы могли повторно использовать его. – rybo111

1

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

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

CSS для загрузки контейнера & контента (в основном из ответа mehyaa в), а также 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>

источник

2016-03-04 16:39:13 rybo111

+0

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

11

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

Работает с 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; 
 
     }

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

 
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 (it has a new window load event)</li> 
 
    <li>No image needed but it's easy to add one</li> 
 
    <li>Change the delay for more 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

источник

2017-01-18 22:58:07

3

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

Прежде всего создать 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, который даст результат , и после того, как страница будет готова над окнами, функция загрузки будет срабатывать и которая скрывает экран обложки после экрана полностью загружена.

источник

2017-07-17 11:26:22

+0

Отлично!только пришлось использовать их, чтобы сделать его полноэкранным: фиксированное; ширина: 100 вольт; высота: 100vh; – numbtongue

1

Мой блог будет работать на 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">

источник

2017-10-17 08:36:12

Как показать страницу Загрузка div до тех пор, пока страница не закончит загрузку

ответ

Смежные вопросы