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?
Jawaban:
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 ...)
$('#loading').hide();pada setiap memuat halaman.
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.
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>$(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)
$( "#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.
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> Memuat halaman gambar dengan efek fadeout paling sederhana yang dibuat di JS:
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 
hasil dan setelah halaman siap di atas windows pada fungsi beban akan menyala dan yang menyembunyikan layar penutup setelah layar terisi penuh.
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.
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();
});beforeSenddan successuntuk setiap panggilan ajax.
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">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";$("#myElement").hide()mudah di mata?
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>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();
});hide()elemen daripada remove()itu, sehingga Anda bisa menggunakannya kembali.
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); }
}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;
}