Sayfanın yüklenmesi bitene kadar Sayfa Yükleniyor div'i nasıl gösterilir?

154

Web sitemizde yoğun aramalar yaptığı için oldukça yavaş yüklenen bir bölümüm var.

divSayfa kendini hazırlarken göstermek ve sonra her şey hazır olduğunda yok olmak için "yükleniyor" benzeri bir şeyi nasıl söyleyebileceğime dair bir fikrin var mı?

javascript  jquery  html  dom  loader 
— Shadi Almosri
kaynak

Yanıtlar:

221

Buna ihtiyacım vardı ve biraz araştırmadan sonra bunu buldum ( jQuery gerekli):

İlk olarak, <body>etiketin hemen arkasına şunu ekleyin:

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

Ardından, div ve görüntü için stil sınıfını CSS'nize ekleyin:

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

Ardından, bu javascript'i sayfanıza ekleyin </body>(elbette tercihen sayfanızın sonunda, kapanış etiketinizden önce ):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Son olarak, yükleme görüntüsünün ve background-colouryükleme div öğesinin konumunu stil sınıfıyla ayarlayın.

İşte bu, gayet iyi çalışmalı. Ama elbette bir ajax-loader.gifyere sahip olmalısın . Burada bedava . (Sağ tıklayın> Resmi Farklı Kaydet ...)

— Mehyaa
kaynak
5
başka bir sayfaya yönlendirilirken, aynı sayfada kalır ve aniden istenen sayfayı görüntüler, ardından: kaldırmadan önce önceki sayfada yükleme bölmesini ve hedef sayfayı gösterir. window.onbeforeunload = function () {$ ('# yükleniyor'). show (); }
— Sameh Deabes
2
+1 Bu kısa, tatlı ve anlaşılır, onu seviyorum. Ancak bu div'i kaldırıp yalnızca <img> (;
— Francisco Presencia
3
Yüklenen resmin yüklenmesi biraz zaman alıyor, o zaman sayfa zaten yüklenene kadar
— Elyor
1
$('#loading').hide();Her sayfa yüklemesinde eklemekten kaçınmak için cevabıma bakın .
— rybo111
Bu Ajax kodu etkili ve hızlı çalışacak: smallenvelop.com/display-loading-icon-page-loads-completely
— JWC
39

Bu komut dosyası, sayfa yüklenirken tüm pencereyi kaplayan bir div ekleyecektir. Otomatik olarak yalnızca CSS içeren bir yükleme çarkı gösterecektir. Pencerenin (belgenin değil) yüklenmesi bitene kadar bekleyecek, ardından isteğe bağlı olarak birkaç saniye daha bekleyecektir.

  • JQuery 3 ile çalışır (yeni bir pencere yükleme olayına sahiptir)
  • Resme gerek yok ama eklemek çok kolay
  • Daha fazla markalama veya talimat için gecikmeyi değiştirin
  • Yalnızca bağımlılık jQuery'dir.

Https://projects.lukehaas.me/css-loaders adresinden CSS yükleyici kodu

    
$('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>
Snippet'i genişlet

— Victor Stoddard
kaynak
Bunu görüntü etiketleri için nasıl ekleyebilirim?
— Mano M
1
@ManoM $(window).on("load", handler), resimler, komut dosyaları ve iframe'ler dahil olmak üzere tüm DOM nesnelerinin yüklenmesi bittiğinde tetiklenir . Belirli bir görüntünün yüklenmesini beklemek istiyorsanız, şunu kullanın$('#imageId').on("load", handler)
— Victor Stoddard
Bu benim için sadece sayfa ilk yüklendiğinde, yani tarayıcı / sekme açıldığında veya yenilendiğinde çalışıyor. Ancak, sayfa açıldıktan sonra yüklenirken görünmez. Farklı içerikleri gösteren geçişlere sahip bir sayfam var ve içerikler arasında geçiş yapıldığında yüklenmesi biraz zaman alıyor. Aynı kodu, yalnızca sayfa ilk açıldığında değil, aynı zamanda her yüklenmesi biraz zaman aldığında yüklenecek şekilde uyarlayabileceğim bir yol var mı?
— Joehat
1
Yerine @Joehat $( "#loadingDiv" ).remove();ile $( "#loadingDiv" ).hide();ve ekleme $( "#loadingDiv" ).show();önce setTimeout(removeLoader, 2000);. Sayfayı daha hafif hale getirmek için div'i kaldırdım, ancak bu düzeltme onu yeniden kullanılabilir hale getiriyor.
— Victor Stoddard
Kodunuzu denedim .. Tuhaf. Sayfamı aradığımda boş bir sayfa gösteriyor (içerik yükleniyor). Birkaç saniye sonra (içeriğin yüklendiğini düşünüyorum), yükleyiciyi tam sayfayı gösterdiğinden 2 saniye boyunca gösteriyor. Bir göz atabilirsiniz
— güneş
30 

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>
Snippet'i genişlet

JS'de oluşturulan en basit karartma efektine sahip sayfa yükleme resmi :

— Dariusz J
kaynak
9

Bunun için benim için mükemmel bir şekilde çalışan başka bir basit çözümüm var.

Öncelikle, aşağıda gösterildiği gibi GIF yüklemenin yanı sıra saydam kaplama olan Lockon sınıfı adında bir CSS oluşturun.

.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;
}

Şimdi, sayfa her yüklendiğinde tüm sayfayı bir kaplama olarak kaplayan bu sınıfla div'imizi oluşturmamız gerekiyor.

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

Şimdi, sayfa hazır olduğunda bu kapak ekranını gizlememiz gerekiyor ve böylece kullanıcının sayfa hazır olana kadar herhangi bir olayı tıklamasını / tetiklemesini kısıtlayabiliyoruz.

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

Sayfa her yüklendiğinde yukarıdaki çözüm iyi olacaktır.

Şimdi soru, sayfa yüklendikten sonra, bir düğmeye tıkladığımızda veya uzun zaman alacak bir olayda, bunu aşağıda gösterildiği gibi müşteri tıklama olayında göstermemiz gerekiyor.

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

Yani bu baskı butonuna tıkladığımızda (ki bu raporu vermesi uzun zaman alacak) busonuç veren kapak ekranımızı GIF ile gösterecek ve sayfa hazır olduğunda yükleme fonksiyonunun üzerindeki pencereler yanacak ve kapak ekranını gizleyecek ekran tamamen yüklendiğinde.

— Rinoy Ashokan
kaynak
2
Harika! bunları yalnızca tam ekran konumuna getirmek için kullanmak zorunda kaldı: sabit; genişlik: 100vw; yükseklik: 100vh;
— boateng
6

İçeriği varsayılan olarak ayarlayın display:noneve ardından display:blocktamamen yüklendikten sonra onu veya benzeri bir olay işleyicisine ayarlayın. Ardından, display:blockiçinde "Yükleniyor" olarak ayarlanmış bir div'e sahip olun ve display:nonedaha önce olduğu gibi aynı olay işleyicisine ayarlayın .

— Kehribar
kaynak
1
bunu yapmak için hangi olayı kullanırdın? Javascript sayfa yüklemesi? yoksa daha iyi bir yer var mı?
— Mil
Sayfa için kurulum işleri yapan başka JS'niz olup olmadığına bağlıdır - öyleyse, bunlar yapıldıktan sonra arayın, değilse, o zaman belge yükleme iyi çalışır.
— Amber
2

Eh, bu büyük ölçüde 'yoğun çağrı'da ihtiyaç duyulan unsurları nasıl yüklediğinize bağlıdır, ilk düşüncem bu yükleri ajax aracılığıyla yaptığınızdır. Durum buysa, 'beforeSend' seçeneğini kullanabilir ve aşağıdaki gibi bir ajax çağrısı yapabilirsiniz:

$.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);
  }
});

DÜZENLE Görüyorum ki, bu durumda 'display:block'/'display:none'yukarıdaki seçeneklerden birini $(document).ready(...)jQuery ile birlikte kullanmak muhtemelen gitmek için bir yoldur. $(document).ready()Tüm belge yapısı için fonksiyon bekler yürütmeden önce yüklenecek ( ancak yüke tüm medya beklemez ). Bunun gibi bir şey yapardın:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
— Btelles
kaynak
ne yazık ki ajax aracılığıyla değil, php betiğinin verileri veritabanından hazırlamasını bekler, bu nedenle bazı html öğeleri yüklenir ve tarayıcı geri kalanını yüklemeden önce veri tablosunu bekler. Bu, sayfa durmuş gibi görünebilir, bu nedenle "bir şeyler olduğunu" göstermek ve kullanıcının uzaklaşmasına neden olmayacak bir şeyin görüntülenmesi gerekir ...
— Shadi Almosri
Bilginize: Web'in ilkesi (ajax olmadan), bir sunucunun tüm sayfayı sunucu tarafında oluşturması ve tamamlandığında bu sonucu (html) tarayıcıya göndermesidir. Sayfanın oluşturulması ortada bir yerde durdurulursa (tarayıcıda görünen sayfayı görebilirsiniz), bu bir php betiği olamaz, çünkü php yalnızca sunucu tarafında çalışır.
— Peter
Eklemekten kaçının cevabım bakın beforeSendve successher ajax çağrısına.
— rybo111
2

Blogum yüzde 100 çalışacak.

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">
Snippet'i genişlet

— Jitendra Patel
kaynak
1

<div>Yükleme mesajınızı içeren bir öğe oluşturun , <div>bir kimlik verin ve ardından içeriğinizin yüklenmesi bittiğinde şunları gizleyin <div>:

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

... veya düz JavaScript'te:

document.getElementById("myElement").style.display = "none";
— Steve Harrison
kaynak
Basittir ve işi bitirir. Okunabilirlik açısından bakıldığında $("#myElement").hide()gözler için daha kolay değil mi?
— user3613932
1

İşte kullandığım jQuery, tüm ajax başlatma / durdurma işlemlerini izliyor, böylece her ajax çağrısına eklemenize gerek yok:

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

Yükleme kabı ve içeriği için CSS (çoğunlukla mehyaa'nın cevabından) ve ayrıca bir hidesınıf:

#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
kaynak
Sorun şu ki, bir girdide ajax yüklü bir otomatik tamamlama varsa, yükleyici görünecektir.
— Lucas
0

@Mehyaa cevabına göre, ancak çok daha kısa:

HTML (hemen sonra <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, zaten kullandığım için):

$(window).load(function() {
  $('#loading').remove();
  });
— Francisco Presencia
kaynak
1
Daha iyi içelim hide()ziyade eleman remove()bunu yeniden kullanmak, böylece o, o.
— rybo111
0

Bu, bir api çağrısı ile senkronize olacaktır, api çağrısı tetiklendiğinde yükleyici gösterilir. API çağrısı başarılı olduğunda, yükleyici kaldırılır. Bu, sayfa yükleme için veya bir api araması sırasında kullanılabilir.

  $.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); }
}
— Süper Göz
kaynak
0

tema custom_theme.theme dosyanızda drupal için

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

Html.html.twig dosyasında gövde içindeki ana içerik bağlantısını atladıktan sonra

{% 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 %}

css dosyasında

#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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.