Tôi có một phần trên trang web của chúng tôi tải khá chậm vì nó đang thực hiện một số cuộc gọi chuyên sâu.
Bất kỳ ý tưởng nào làm thế nào tôi có thể khiến một người divnói điều gì đó tương tự như "tải" để hiển thị trong khi trang tự chuẩn bị và sau đó biến mất khi mọi thứ đã sẵn sàng?
Câu trả lời:
Tôi đã cần điều này và sau một số nghiên cứu tôi đã nghĩ ra điều này ( cần jQuery ):
Đầu tiên, ngay sau khi <body>thêm thẻ này:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>Sau đó thêm lớp phong cách cho div và hình ảnh vào CSS của bạn:
#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;
}Sau đó, thêm javascript này vào trang của bạn (tốt nhất là ở cuối trang của bạn, trước </body>thẻ đóng của bạn , tất nhiên):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>Cuối cùng, điều chỉnh vị trí của hình ảnh tải và background-colourdiv tải với lớp phong cách.
Đây là nó, nên làm việc tốt. Nhưng tất nhiên bạn phải có một ajax-loader.gifnơi nào đó. Miễn phí ở đây . (Nhấp chuột phải> Lưu hình ảnh dưới dạng ...)
$('#loading').hide();vào mỗi lần tải trang.
Tập lệnh này sẽ thêm một div bao trùm toàn bộ cửa sổ khi tải trang. Nó sẽ tự động hiển thị một spinner tải CSS. Nó sẽ đợi cho đến khi cửa sổ (không phải tài liệu) tải xong, sau đó nó sẽ chờ thêm vài giây tùy chọn.
Mã trình tải CSS từ 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)kích hoạt khi tất cả các đối tượng DOM tải xong, bao gồm hình ảnh, tập lệnh, thậm chí cả iframe. Nếu bạn muốn đợi một hình ảnh cụ thể tải, hãy sử dụng$('#imageId').on("load", handler)
$( "#loadingDiv" ).remove();bằng $( "#loadingDiv" ).hide();và thêm $( "#loadingDiv" ).show();trước setTimeout(removeLoader, 2000);. Tôi đã gỡ bỏ div để làm cho trang nhẹ hơn, nhưng sửa lỗi này làm cho nó có thể sử dụng lại.
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> Trang tải hình ảnh với hiệu ứng mờ dần đơn giản nhất được tạo trong JS:
Tôi có một giải pháp đơn giản dưới đây cho việc này hoàn toàn phù hợp với tôi.
Trước hết, tạo một CSS có tên lớp Lockon là lớp phủ trong suốt cùng với việc tải GIF như dưới đây
.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;
}Bây giờ chúng ta cần tạo div của mình với lớp này bao phủ toàn bộ trang dưới dạng lớp phủ bất cứ khi nào trang được tải
<div id="coverScreen" class="LockOn">
</div>Bây giờ chúng tôi cần ẩn màn hình bìa này bất cứ khi nào trang sẵn sàng và để chúng tôi có thể hạn chế người dùng nhấp / bắn bất kỳ sự kiện nào cho đến khi trang sẵn sàng
$(window).on('load', function () {
$("#coverScreen").hide();
});Giải pháp trên sẽ ổn bất cứ khi nào trang đang tải.
Bây giờ câu hỏi là sau khi trang được tải, bất cứ khi nào chúng tôi nhấp vào nút hoặc sự kiện sẽ mất nhiều thời gian, chúng tôi cần hiển thị điều này trong sự kiện nhấp vào máy khách như dưới đây
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});Điều đó có nghĩa là khi chúng tôi nhấp vào nút in này (sẽ mất nhiều thời gian để báo cáo), nó sẽ hiển thị màn hình bìa của chúng tôi với GIF, 
kết quả và một khi trang đã sẵn sàng phía trên cửa sổ, chức năng tải sẽ kích hoạt và ẩn màn hình bìa một khi màn hình được tải đầy đủ.
Mặc định nội dung display:nonevà sau đó có một trình xử lý sự kiện đặt nó thành display:blockhoặc tương tự sau khi nó được tải đầy đủ. Sau đó, có một div được đặt thành display:block"Đang tải" trong đó và đặt nó display:nonevào cùng một trình xử lý sự kiện như trước.
Chà, điều này phần lớn phụ thuộc vào cách bạn tải các yếu tố cần thiết trong 'cuộc gọi chuyên sâu', suy nghĩ ban đầu của tôi là bạn đang thực hiện những tải đó thông qua ajax. Nếu đó là trường hợp, thì bạn có thể sử dụng tùy chọn 'beforeSend' và thực hiện cuộc gọi ajax như thế này:
$.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
tôi thấy, trong trường hợp đó, sử dụng một trong các 'display:block'/'display:none'tùy chọn ở trên kết hợp với $(document).ready(...)từ jQuery có lẽ là cách tốt nhất. Các $(document).ready()chờ đợi chức năng cho toàn bộ cấu trúc tài liệu được nạp trước khi thực hiện ( nhưng nó không chờ đợi cho tất cả các phương tiện truyền thông để tải ). Bạn sẽ làm một cái gì đó như thế này:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});beforeSendvà successvào mỗi cuộc gọi ajax.
Blog của tôi sẽ hoạt động 100 phần trăm.
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">Tạo một <div>yếu tố có chứa thông điệp tải của bạn, cung cấp <div>ID và sau đó khi nội dung của bạn tải xong, hãy ẩn <div>:
$("#myElement").css("display", "none");... hoặc bằng JavaScript đơn giản:
document.getElementById("myElement").style.display = "none";$("#myElement").hide()dễ nhìn hơn?
Đây là jQuery tôi đã kết thúc bằng cách sử dụng, nó giám sát tất cả ajax start / stop, vì vậy bạn không cần thêm nó vào mỗi lệnh gọi ajax:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});CSS cho bộ chứa & nội dung tải (chủ yếu từ câu trả lời của mehyaa), cũng như một hidelớp:
#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>Dựa trên câu trả lời @mehyaa, nhưng ngắn hơn nhiều:
HTML (ngay sau đó <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, vì tôi đã sử dụng nó):
$(window).load(function() {
$('#loading').remove();
});hide()phần tử hơn là remove()nó, để bạn có thể sử dụng lại nó.
Điều này sẽ được đồng bộ hóa với một cuộc gọi api, Khi cuộc gọi api được kích hoạt, trình tải được hiển thị. Khi cuộc gọi api thành công, trình tải sẽ bị xóa. Điều này có thể được sử dụng cho tải trang hoặc trong cuộc gọi 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); }
}cho drupal trong tập tin custom_theme.theme chủ đề của bạn
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}Trong tệp html.html.twig sau khi bỏ qua liên kết nội dung chính trong phần thân
{% 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 %} trong tập tin 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;
}