Bagaimana cara menunjukkan pemuatan Halaman sampai halaman selesai memuat?

148

Saya memiliki bagian di situs web kami yang memuat cukup lambat karena melakukan beberapa panggilan intensif.

Adakah ide bagaimana saya bisa divmengatakan sesuatu yang mirip dengan "memuat" untuk ditampilkan saat halaman mempersiapkan diri dan kemudian menghilang ketika semuanya sudah siap?

javascript jquery html dom loader Shadi Almosri
sumber

Jawaban:

215

Saya membutuhkan ini dan setelah beberapa penelitian saya datang dengan ini ( jQuery dibutuhkan):

Pertama, tepat setelah <body>tag tambahkan ini:

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

Kemudian tambahkan kelas gaya untuk div dan gambar ke CSS Anda:

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

Kemudian, tambahkan javascript ini ke halaman Anda (lebih disukai di akhir halaman Anda, sebelum </body>tag penutup Anda , tentu saja):

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

Terakhir, sesuaikan posisi gambar pemuatan dan background-colourdiv pemuatan dengan kelas gaya.

Ini dia, harusnya bekerja dengan baik. Tapi tentu saja Anda harus punya ajax-loader.giftempat. Gratis di sini . (Klik kanan> Simpan Gambar Sebagai ...)

mehyaa
sumber
5
ketika mengalihkan ke halaman lain, ia tetap berada di halaman yang sama dan tiba-tiba menampilkan halaman yang diinginkan, kemudian: tampilkan panel memuat di halaman sebelumnya sebelum memuat serta halaman target. window.onbeforeunload = function () {$ ('# loading'). show (); }
Sameh Deabes
2
+1 Ini singkat, manis dan jelas, saya menyukainya. Namun saya akan menghapus div itu dan hanya menyisakan <img> (;
Francisco Presencia
3
perlu beberapa saat untuk memuat gambar yang dimuat, sampai saat itu halaman sudah dimuat
Elyor
1
Lihat jawaban saya untuk menghindari menambahkan $('#loading').hide();pada setiap memuat halaman.
rybo111
Kode Ajax ini akan bekerja secara efektif dan cepat: smallenvelop.com/display-loading-icon-page-loads-completely
JWC
36

Script ini akan menambahkan div yang mencakup seluruh jendela saat halaman dimuat. Ini akan menampilkan pemintal pemuatan khusus CSS secara otomatis. Ini akan menunggu sampai jendela (bukan dokumen) selesai memuat, lalu akan menunggu beberapa detik tambahan opsional.

  • Bekerja dengan jQuery 3 (memiliki acara memuat jendela baru)
  • Tidak perlu gambar tetapi mudah untuk menambahkannya
  • Ubah penundaan untuk lebih banyak branding atau instruksi
  • Hanya ketergantungan adalah jQuery.

Kode pemuat CSS dari 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>
Luaskan cuplikan

Victor Stoddard
sumber
Bagaimana cara menambahkan ini untuk tag imag?
Mano M
1
@ManoM $(window).on("load", handler)menyala ketika semua objek DOM selesai memuat, termasuk gambar, skrip, bahkan iframe. Jika Anda ingin menunggu gambar tertentu dimuat, gunakan$('#imageId').on("load", handler)
Victor Stoddard
Ini untuk saya hanya berfungsi ketika halaman pertama kali dimuat, yaitu ketika browser / tab dibuka atau di-refresh. Namun, itu tidak muncul ketika halaman dimuat setelah dibuka. Saya memiliki halaman dengan matikan yang menampilkan konten yang berbeda dan ketika beralih di antara konten dibutuhkan waktu untuk memuat. Apakah ada cara di mana saya bisa mengadaptasi kode yang sama ini untuk memuat tidak hanya saat pertama kali halaman dibuka tetapi setiap kali butuh beberapa saat untuk memuat?
Joehat
1
@ Joehat ganti $( "#loadingDiv" ).remove();dengan $( "#loadingDiv" ).hide();dan tambahkan $( "#loadingDiv" ).show();sebelumnya setTimeout(removeLoader, 2000);. Saya memiliki div dihapus untuk membuat halaman lebih ringan, tetapi perbaikan ini membuatnya dapat digunakan kembali.
Victor Stoddard
Saya mencoba kode Anda .. Aneh. Ketika saya memanggil halaman saya, halaman itu menunjukkan halaman kosong (memuat konten). Setelah beberapa detik (saya pikir isinya dimuat) itu menunjukkan loader selama 2 detik, daripada itu menunjukkan halaman penuh. Anda dapat melihatnya: criferrara.it/crigest/toshiba
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>
Luaskan cuplikan

Memuat halaman gambar dengan efek fadeout paling sederhana yang dibuat di JS:

Dariusz J
sumber
9

Saya punya solusi sederhana di bawah ini untuk ini yang sangat cocok untuk saya.

Pertama-tama, buat CSS dengan nama kelas Lockon yang overlay transparan bersama dengan memuat GIF seperti yang ditunjukkan di bawah ini

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

Sekarang kita perlu membuat div kita dengan kelas ini yang mencakup seluruh halaman sebagai overlay setiap kali halaman dimuat

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

Sekarang kita perlu menyembunyikan layar sampul ini setiap kali halaman siap dan sehingga kita dapat membatasi pengguna dari mengklik / memecat peristiwa apa pun sampai halaman siap

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

Solusi di atas akan baik-baik saja setiap kali halaman memuat.

Sekarang pertanyaannya adalah setelah halaman dimuat, setiap kali kita mengklik tombol atau acara yang akan memakan waktu lama, kita perlu menunjukkan ini di acara klik klien seperti yang ditunjukkan di bawah ini

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

Itu berarti ketika kita mengklik tombol cetak ini (yang akan membutuhkan waktu lama untuk memberikan laporan) itu akan menampilkan layar sampul kita dengan GIF yang memberikan inihasil dan setelah halaman siap di atas windows pada fungsi beban akan menyala dan yang menyembunyikan layar penutup setelah layar terisi penuh.

Rinoy Ashokan
sumber
1
Bagus! hanya harus menggunakan ini untuk membuatnya posisi layar penuh: diperbaiki; lebar: 100vw; tinggi: 100vh;
boateng
6

Default konten untuk display:nonedan kemudian memiliki pengendali acara yang mengaturnya display:blockatau serupa setelah itu dimuat penuh. Kemudian miliki div yang diatur display:blockdengan "Memuat" di dalamnya, dan atur ke display:nonedalam pengendali event yang sama seperti sebelumnya.

Amber
sumber
1
acara apa yang akan Anda gunakan untuk melakukan ini? Memuat halaman Javascript? atau ada tempat yang lebih baik?
Miles
Bergantung pada jika Anda memiliki JS lain yang melakukan pengaturan untuk halaman - jika demikian, panggil setelah selesai, jika tidak, lalu muat dokumen berfungsi dengan baik.
Amber
2

Yah, ini sangat tergantung pada bagaimana Anda memuat elemen yang diperlukan dalam 'panggilan intensif', pemikiran awal saya adalah bahwa Anda melakukan itu melalui ajax. Jika itu masalahnya, maka Anda bisa menggunakan opsi 'beforeSend' dan melakukan panggilan ajax seperti ini:

$.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 Saya melihat, dalam hal ini, menggunakan salah satu 'display:block'/'display:none'opsi di atas dalam hubungannya dengan $(document).ready(...)dari jQuery mungkin adalah cara untuk pergi. The $(document).ready()menunggu fungsi untuk struktur dokumen seluruh dimuat sebelum mengeksekusi ( tetapi tidak menunggu semua media untuk beban ). Anda akan melakukan sesuatu seperti ini:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
btelles
sumber
sayangnya itu tidak melalui ajax, itu menunggu skrip php untuk menyiapkan data dari database, jadi beberapa elemen html dimuat kemudian browser menunggu tabel data sebelum memuat sisanya. Yang bisa terlihat seolah-olah halaman telah terhenti, sehingga perlu sesuatu ditampilkan di sana untuk menunjukkan bahwa "sesuatu yang terjadi" dan tidak menyebabkan pengguna untuk menjauh ...
Shadi Almosri
FYI: Prinsip web (tanpa ajax) adalah server membuat seluruh halaman di sisi server dan setelah selesai mengirimkan hasil ini (html) ke browser. Jika rendering halaman terhenti di suatu tempat di tengah (sementara Anda dapat melihat halaman muncul di browser), itu tidak bisa berupa skrip php, karena php hanya menjalankan sisi server.
Peter
Lihat jawaban saya untuk menghindari menambahkan beforeSenddan successuntuk setiap panggilan ajax.
rybo111
2

Blog saya akan bekerja 100 persen.

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">
Luaskan cuplikan

Jitendra Patel
sumber
1

Buat <div>elemen yang berisi pesan pemuatan Anda, berikan <div>ID, dan kemudian ketika konten Anda selesai memuat, sembunyikan <div>:

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

... atau dalam JavaScript biasa:

document.getElementById("myElement").style.display = "none";
Steve Harrison
sumber
Sederhana dan menyelesaikan pekerjaan. Dari perspektif keterbacaan tidak $("#myElement").hide()mudah di mata?
user3613932
1

Inilah jQuery yang akhirnya saya gunakan, yang memonitor semua start / stop ajax, jadi Anda tidak perlu menambahkannya ke setiap panggilan ajax:

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

CSS untuk wadah pemuatan & konten (kebanyakan dari jawaban mehyaa), serta hidekelas:

#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
sumber
Masalahnya adalah, jika saya memiliki autocomplete yang ajax di input, loader akan muncul.
Lucas
0

Berdasarkan jawaban @mehyaa, tetapi jauh lebih pendek:

HTML (tepat setelah <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, karena saya sudah menggunakannya):

$(window).load(function() {
  $('#loading').remove();
  });
Francisco Presencia
sumber
1
Lebih baik hide()elemen daripada remove()itu, sehingga Anda bisa menggunakannya kembali.
rybo111
0

Ini akan disinkronkan dengan panggilan api, Ketika panggilan api dipicu, loader ditampilkan. Ketika panggilan api berhasil, loader dihapus. Ini dapat digunakan untuk memuat halaman atau selama panggilan 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
sumber
0

untuk drupal di file theme_theme.theme tema Anda

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

Dalam file html.html.twig setelah melewati tautan konten utama di dalam tubuh

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

dalam file 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
sumber