Jak wyświetlić element div ładowania strony do czasu zakończenia ładowania strony?

148

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?

javascript jquery html dom loader Shadi Almosri
źródło

Odpowiedzi:

215

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

mehyaa
źródło
5
podczas przekierowywania na inną stronę, pozostaje na tej samej stronie i nagle wyświetla żądaną stronę, a następnie: pokaż panel ładowania na poprzedniej stronie przed załadowaniem, a także stronę docelową. window.onbeforeunload = function () {$ ('# ładowanie'). show (); }
Sameh Deabes
2
+1 To jest krótkie, słodkie i jasne, uwielbiam to. Jednak
usunę ten element
3
ładowanie obrazu zajmuje trochę czasu, do tego czasu strona jest już załadowana
Elyor
1
Zobacz moją odpowiedź, aby uniknąć dodawania $('#loading').hide();przy każdym ładowaniu strony.
rybo111
Ten kod Ajax będzie działał skutecznie i szybko: smallenvelop.com/display-loading-icon-page-loads-completely
May
36

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.

  • Działa z jQuery 3 (ma nowe zdarzenie ładowania okna)
  • Nie jest potrzebny żaden obraz, ale łatwo go dodać
  • Zmień opóźnienie, aby uzyskać więcej oznakowań lub instrukcji
  • Jedyną zależnością jest jQuery.

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>
Rozwiń fragment

Victor Stoddard
źródło
Jak to dodać do tagów obrazów?
Mano M
1
@ManoM $(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)
Victor Stoddard,
U mnie to działa tylko wtedy, gdy strona się ładuje po raz pierwszy, tj. Gdy przeglądarka / karta jest otwierana lub odświeżana. Jednak nie pojawia się podczas ładowania strony po jej otwarciu. Mam stronę z przełącznikami wyświetlającymi różną zawartość, a podczas przełączania się między zawartością ładowanie zajmuje trochę czasu. Czy istnieje sposób, w jaki mógłbym dostosować ten sam kod, aby ładował się nie tylko przy pierwszym otwarciu strony, ale za każdym razem, gdy ładowanie zajmuje trochę czasu?
Joehat,
1
@Joehat zastąpić $( "#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.
Victor Stoddard
Wypróbowałem twój kod ... To dziwne. Kiedy dzwonię na moją stronę, pokazuje ona pustą stronę (ładuje treść). Po kilku sekundach (myślę, że zawartość jest ładowana) pokazuje program ładujący przez 2 sekundy, niż pokazuje całą stronę. Możesz rzucić
sunlight76
28 

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>
Rozwiń fragment

Obraz wczytywania strony z najprostszym efektem zanikania utworzony w JS:

Dariusz J
źródło
9

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 towynik, a gdy strona jest gotowa, powyżej okna funkcji ładowania uruchomią się i ukryją ekran okładki po pełnym załadowaniu ekranu.

Rinoy Ashokan
źródło
1
Wspaniały! wystarczyło ich użyć, aby ustawić pozycję na pełnym ekranie: naprawiono; szerokość: 100 vw; wysokość: 100 vh;
boateng
6

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.

Bursztyn
źródło
1
jakiego wydarzenia użyłbyś, żeby to zrobić? Wczytać stronę JavaScript? czy jest lepsze miejsce?
Miles
Zależy od tego, czy masz inny JS zajmujący się konfiguracją strony - jeśli tak, wywołaj go po zakończeniu, jeśli nie, to ładowanie dokumentu działa dobrze.
Bursztynowy
2

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();
});
btelles
źródło
niestety nie odbywa się to przez Ajax, tylko czeka, aż skrypt php przygotuje dane z bazy danych, więc niektóre elementy html są ładowane, a następnie przeglądarka czeka na tabelę danych przed załadowaniem pozostałych. Co może wyglądać tak, jakby strona się zawiesiła, więc potrzebuję czegoś wyświetlanego, aby pokazać, że „coś się dzieje” i nie powodować odejścia użytkownika ...
Shadi Almosri
FYI: Zasada sieci (bez AJAX) polega na tym, że serwer renderuje całą stronę po stronie serwera i po zakończeniu wysyła ten wynik (html) do przeglądarki. Jeśli renderowanie strony jest zatrzymane gdzieś pośrodku (podczas gdy strona pojawia się w przeglądarce), nie może to być skrypt php, ponieważ php działa tylko po stronie serwera.
Peter
Zobacz moją odpowiedź, aby uniknąć dodawania beforeSendi successdo każdego wywołania Ajax.
rybo111
2

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">
Rozwiń fragment

Jitendra Patel
źródło
1

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";
Steve Harrison
źródło
Proste i gotowe do pracy. Czy z punktu widzenia czytelności nie jest $("#myElement").hide()łatwiejsze dla oczu?
user3613932
1

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>
rybo111
źródło
Problem polega na tym, że jeśli w danych wejściowych załadowano autouzupełnianie Ajax, pojawi się moduł ładujący.
Lucas
0

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();
  });
Francisco Presencia
źródło
1
Lepiej jest dla hide()elementu niż dla remove()niego, abyś mógł go ponownie użyć.
rybo111
0

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); }
}
SuperEye
źródło
0

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;
 }
Pradeep
źródło