Mam sekcję w naszej witrynie, która ładuje się dość wolno, ponieważ wykonuje intensywne połączenia.
Masz jakiś pomysł, jak mogę sprawić, divby podczas przygotowywania strony pojawiło się coś podobnego do „ładowania”, a następnie zniknęło, gdy wszystko będzie gotowe?
Odpowiedzi:
Potrzebowałem tego i po kilku badaniach wymyśliłem to ( potrzebne jQuery ):
Najpierw zaraz po <body>tagu dodaj to:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Następnie dodaj klasę stylu dla elementu DIV i obrazu do swojego 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;
}
Następnie dodaj ten skrypt javascript do swojej strony (najlepiej na końcu strony, </body>oczywiście przed tagiem zamykającym ):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>
Na koniec dostosuj położenie obrazu ładowania i background-colourelementu div ładującego za pomocą klasy style.
To jest to, powinno działać dobrze. Ale oczywiście musisz ajax-loader.gifgdzieś mieć . Gratisy tutaj . (Kliknij prawym przyciskiem myszy> Zapisz obraz jako ...)
$('#loading').hide();przy każdym ładowaniu strony.
Ten skrypt doda element div, który będzie obejmował całe okno podczas ładowania strony. Automatycznie wyświetli spinner ładujący tylko CSS. Poczeka na zakończenie ładowania okna (nie dokumentu), a następnie odczeka opcjonalne dodatkowe kilka sekund.
Kod modułu ładującego CSS z 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 window 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>$(window).on("load", handler)uruchamia się po zakończeniu ładowania wszystkich obiektów DOM, w tym obrazów, skryptów, a nawet ramek iframe. Jeśli chcesz poczekać na załadowanie określonego obrazu, użyj$('#imageId').on("load", handler)
$( "#loadingDiv" ).remove();z $( "#loadingDiv" ).hide();i dodać $( "#loadingDiv" ).show();wcześniej setTimeout(removeLoader, 2000);. Usunąłem element div, aby strona była lżejsza, ale ta poprawka umożliwia ponowne użycie.
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> Obraz wczytywania strony z najprostszym efektem zanikania utworzony w JS:
Mam poniżej inne proste rozwiązanie, które doskonale mi się sprawdziło.
Przede wszystkim utwórz CSS o nazwie Lockon class, która jest przezroczystą nakładką wraz z ładowaniem GIF-a, jak pokazano poniżej
.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;
}Teraz musimy utworzyć nasz element div z tą klasą, który zakrywa całą stronę jako nakładkę za każdym razem, gdy strona jest ładowana
<div id="coverScreen" class="LockOn">
</div>Teraz musimy ukryć ten ekran tytułowy za każdym razem, gdy strona jest gotowa, i abyśmy mogli ograniczyć użytkownikowi możliwość klikania / uruchamiania dowolnego zdarzenia, dopóki strona nie będzie gotowa
$(window).on('load', function () {
$("#coverScreen").hide();
});Powyższe rozwiązanie będzie w porządku podczas ładowania strony.
Teraz pytanie brzmi po załadowaniu strony, za każdym razem, gdy klikniemy przycisk lub zdarzenie, które zajmie dużo czasu, musimy to pokazać w zdarzeniu kliknięcia klienta, jak pokazano poniżej
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});Oznacza to, że po kliknięciu tego przycisku drukowania (co zajmie dużo czasu, aby wygenerować raport), pokaże się nasz ekran tytułowy z GIF, który daje 
wynik, a gdy strona jest gotowa, powyżej okna funkcji ładowania uruchomią się i ukryją ekran okładki po pełnym załadowaniu ekranu.
Domyślnie zawartość, display:nonea następnie program obsługi zdarzeń, który ustawia ją na display:blocklub podobnie po pełnym załadowaniu. Następnie umieść element div, który jest ustawiony na display:block„Loading” w nim, i ustaw go na display:noneten sam program obsługi zdarzeń, co poprzednio.
Cóż, w dużej mierze zależy to od tego, w jaki sposób ładujesz elementy potrzebne w `` wywołaniu intensywnym '', moja początkowa myśl jest taka, że wykonujesz te obciążenia za pośrednictwem ajax. Jeśli tak jest, możesz użyć opcji „beforeSend” i wykonać wywołanie Ajax w ten sposób:
$.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);
}
});EDYCJA
Widzę, że w tym przypadku użycie jednej z 'display:block'/'display:none'powyższych opcji w połączeniu z $(document).ready(...)z jQuery jest prawdopodobnie najlepszym rozwiązaniem. Te $(document).ready()oczekiwania funkcyjne dla całej struktury dokumentu mają być załadowane przed wykonaniem ( ale nie czekać na wszystkich nośnikach do obciążenia ). Zrobiłbyś coś takiego:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});beforeSendi successdo każdego wywołania Ajax.
Mój blog będzie działał w 100 proc.
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">Utwórz <div>element, który zawiera wiadomość o wczytywaniu, podaj <div>identyfikator, a po zakończeniu ładowania treści ukryj <div>:
$("#myElement").css("display", "none");... lub w zwykłym JavaScript:
document.getElementById("myElement").style.display = "none";$("#myElement").hide()łatwiejsze dla oczu?
Oto jQuery, którego użyłem, który monitoruje wszystkie start / stop ajax, więc nie musisz dodawać go do każdego wywołania ajax:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});CSS dla kontenera ładującego i treści (głównie z odpowiedzi mehyaa), a także hideklasa:
#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>Na podstawie odpowiedzi @mehyaa, ale znacznie krótszej:
HTML (zaraz po <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, ponieważ już go używam):
$(window).load(function() {
$('#loading').remove();
});hide()elementu niż dla remove()niego, abyś mógł go ponownie użyć.
Będzie to zsynchronizowane z wywołaniem interfejsu API. Gdy wywołanie interfejsu API zostanie wyzwolone, zostanie wyświetlony moduł ładujący. Po pomyślnym wywołaniu interfejsu API moduł ładujący jest usuwany. Można tego użyć do ładowania strony lub podczas wywołania interfejsu API.
$.ajax({
type: 'GET',
url: url,
async: true,
dataType: 'json',
beforeSend: function (xhr) {
$( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
$("html, body").animate( { scrollTop: $(document).height() }, 100);
},
success: function (jsonOptions) {
$('#searching-loader').remove();
.
.
}
});CSS
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}dla drupal w pliku motywu custom_theme.theme
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}W pliku html.html.twig po pominięciu głównego linku do treści w treści
{% if preloader %}
<div id="test-preloader" >
<div id="preloader-inner" class="cssload-container">
<div class="wait-text">{{ 'Please wait...'|t }} </div>
<div class="cssload-item cssload-moon"></div>
</div>
</div>
{% endif %} w pliku css
#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 131px;
height: 131px;
background-color: #fff;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
}
.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
}