jQuery를 사용하여“Please Wait, Loading…”애니메이션을 어떻게 만들 수 있습니까?
답변:
다양한 방법으로이 작업을 수행 할 수 있습니다. 페이지에서 "로드 중 ..."이라고 표시되는 작은 상태이거나 새 데이터가로드되는 동안 페이지 전체가 희미하게 표시되는 요소만큼 큰 미묘한 것일 수 있습니다. 아래의 접근법은 두 가지 방법을 모두 수행하는 방법을 보여줍니다.
설정
이제부터 우리에게 좋은 "로드"애니메이션을 받고 시작하자 http://ajaxload.info
I을 사용할 것
아약스 요청을 할 때마다 표시하거나 숨길 수있는 요소를 만들어 봅시다 :
<div class="modal"><!-- Place at bottom of page --></div>CSS
다음으로 약간의 감각을 줍시다.
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
마지막으로 jQuery
좋아, jQuery에. 이 다음 부분은 실제로 정말 간단합니다.
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
그게 다야! ajaxStart또는 ajaxStop이벤트가 발생할 때마다 body 요소에 일부 이벤트를 첨부합니다 . ajax 이벤트가 시작되면 "loading"클래스를 본문에 추가합니다. 이벤트가 완료되면 본문에서 "로드"클래스를 제거합니다.
실제로 참조하십시오 : http://jsfiddle.net/VpDUG/4952/
실제 로딩 이미지 까지이 사이트 에서 다양한 옵션을 확인하십시오.
요청이 시작될 때이 이미지와 함께 DIV를 표시하는 한 몇 가지 선택 사항이 있습니다.
A) 이미지를 수동으로 표시하거나 숨 깁니다.
$('#form').submit(function() {
$('#wait').show();
$.post('/whatever.php', function() {
$('#wait').hide();
});
return false;
});
B) ajaxStart 및 ajaxComplete을 사용하십시오 .
$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});
이를 사용하면 요소가 모든 요청에 대해 표시되거나 숨겨 집니다. 필요에 따라 좋거나 나쁠 수 있습니다.
C) 특정 요청에 대해 개별 콜백을 사용하십시오.
$('#form').submit(function() {
$.ajax({
url: '/whatever.php',
beforeSend: function() { $('#wait').show(); },
complete: function() { $('#wait').hide(); }
});
return false;
});
조나단과 사미르가 제안한 것 (btw! 모두 우수 답변)과 함께 jQuery에는 아약스 요청을 할 때 발생하는 이벤트가 내장되어 있습니다.
있다 ajaxStart이벤트
AJAX 요청이 시작될 때마다 (그리고 아직 활성화되어 있지 않은 경우) 로딩 메시지를 표시하십시오.
... 그리고 형제, ajaxStop이벤트
모든 AJAX 요청이 종료 될 때마다 실행될 함수를 첨부하십시오. 이것은 Ajax 이벤트입니다.
이들은 페이지의 어느 곳에서나 아약스 활동이 발생했을 때 진행 메시지를 표시하는 좋은 방법을 만듭니다.
HTML :
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
스크립트:
$(document).ajaxStart(function(){
$('#loading').show();
}).ajaxStop(function(){
$('#loading').hide();
});
.ajaxStart입니다. 즉 문서에만 첨부 할 수 있습니다. $(document).ajaxStart(function(){}).
웹 사이트 파일 계층의 어딘가에 Ajaxload 에서 회전하는 원의 애니메이션 GIF를 가져올 수 있습니다 . 그런 다음 올바른 코드로 HTML 요소를 추가하고 완료되면 제거하면됩니다. 이것은 매우 간단합니다.
function showLoadingImage() {
$('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}
function hideLoadingImage() {
$('#loading-image').remove();
}
그런 다음 AJAX 호출에서 다음 메소드를 사용해야합니다.
$.load(
'http://example.com/myurl',
{ 'random': 'data': 1: 2, 'dwarfs': 7},
function (responseText, textStatus, XMLHttpRequest) {
hideLoadingImage();
}
);
// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();
여기에는 몇 가지주의 사항이 있습니다. 우선, 로딩 이미지가 표시 될 수있는 장소가 두 개 이상인 경우 어떻게 든 한 번에 몇 개의 통화가 실행되고 있는지 추적하고 통화 중일 때만 숨겨야합니다. 다됐다. 이것은 거의 모든 경우에 작동해야하는 간단한 카운터를 사용하여 수행 할 수 있습니다.
둘째, 성공적인 AJAX 호출시 로딩 이미지 만 숨 깁니다. 오류 상태를 처리하기 위해, 당신은 조사해야 $.ajax보다 더 복잡하다, $.load, $.get등,하지만 훨씬 더 유연한도.
showLoadingImage시작하기 전과 hideLoadingImage완료 한 후에 전화하십시오 . 상당히 간단해야합니다. setTimeout브라우저가 실제로 새 <img>태그를 실제로 렌더링하는지 확인하기 위해 일종의 호출을 수행 해야 할 수도 있습니다 . JavaScript 실행이 끝날 때까지 방해가되지 않는 몇 가지 사례를 보았습니다.
IE8에서 Jonathon의 탁월한 솔루션이 중단되었습니다 (애니메이션은 전혀 표시되지 않음). 이 문제를 해결하려면 CSS를 다음과 같이 변경하십시오.
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};jQuery는 AJAX 요청이 시작되고 종료 될 때를위한 이벤트 후크를 제공합니다. 이것들을 연결하여 로더를 보여줄 수 있습니다.
예를 들어 다음 div를 만듭니다.
<div id="spinner">
<img src="images/spinner.gif" alt="Loading" />
</div>display: none스타일 시트에서로 설정하십시오 . 원하는 방식으로 스타일을 지정할 수 있습니다. 원하는 경우 Ajaxload.info 에서 멋진 로딩 이미지를 생성 할 수 있습니다 .
그런 다음 Ajax 요청을 보낼 때 다음과 같이 자동으로 표시되도록 할 수 있습니다.
$(document).ready(function () {
$('#spinner').bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).hide();
});
});본문 태그 를 닫기 전에 또는 원하는 곳 어디에서 나이 자바 스크립트 블록을 페이지 끝에 추가하면 됩니다.
이제 Ajax 요청을 보낼 때마다 #spinnerdiv가 표시됩니다. 요청이 완료되면 다시 숨겨집니다.
Turbolinks With Rails를 사용하는 경우 이것이 나의 해결책입니다.
이것은 CoffeeScript입니다
$(window).on 'page:fetch', ->
$('body').append("<div class='modal'></div>")
$('body').addClass("loading")
$(window).on 'page:change', ->
$('body').removeClass("loading")Jonathan Sampson의 첫 번째 훌륭한 답변을 기반으로 한 SASS CSS입니다.
# loader.css.scss
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, 0.4)
asset-url('ajax-loader.gif', image)
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}Mark H가 말했듯이 blockUI가 방법입니다.
전의.:
<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
$("#downloadButton").click(function() {
$("#dialog").dialog({
width:"390px",
modal:true,
buttons: {
"OK, AGUARDO O E-MAIL!": function() {
$.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
send();
}
}
});
});
function send() {
$.ajax({
url: "download-enviar.do",
type: "POST",
blablabla
});
}
</script>Obs .: http://www.ajaxload.info/ 에 ajax-loader.gif가 있습니다 .
다른 게시물과 관련하여 CSS3 및 jQuery를 사용하여 추가 외부 리소스 나 파일을 사용하지 않고 매우 간단한 솔루션을 제공합니다.
$('#submit').click(function(){
$(this).addClass('button_loader').attr("value","");
window.setTimeout(function(){
$('#submit').removeClass('button_loader').attr("value","\u2713");
$('#submit').prop('disabled', true);
}, 3000);
});#submit:focus{
outline:none;
outline-offset: none;
}
.button {
display: inline-block;
padding: 6px 12px;
margin: 20px 8px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-image: none;
border: 2px solid transparent;
border-radius: 5px;
color: #000;
background-color: #b2b2b2;
border-color: #969696;
}
.button_loader {
background-color: transparent;
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #969696;
border-bottom: 4px solid #969696;
width: 35px;
height: 35px;
-webkit-animation: spin 0.8s linear infinite;
animation: spin 0.8s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
99% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
99% { transform: rotate(360deg); }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />그러면 버튼이 사라지고 "로드 중"애니메이션이 대신 나타나고 결국 성공 메시지가 표시됩니다.
$(function(){
$('#submit').click(function(){
$('#submit').hide();
$("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
$.post("sendmail.php",
{emailFrom: nameVal, subject: subjectVal, message: messageVal},
function(data){
jQuery("#form").slideUp("normal", function() {
$("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
});
}
);
});
});내가 본 대부분의 솔루션은 로딩 오버레이를 디자인하고, 숨기고 필요에 따라 숨기기를 숨기거나 GIF 또는 이미지 등을 표시 할 것으로 기대합니다.
강력한 jplugin 호출을 사용하여 작업을 완료하면 로딩 화면을 표시하고 해제 할 수있는 강력한 플러그인을 개발하고 싶었습니다.
아래는 코드입니다. Font awesome 및 jQuery에 따라 다릅니다.
/**
* Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
**/
(function($){
// Retain count concept: http://stackoverflow.com/a/2420247/260665
// Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
var retainCount = 0;
// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
$.extend({
loadingSpinner: function() {
// add the overlay with loading image to the page
var over = '<div id="custom-loading-overlay">' +
'<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
'</div>';
if (0===retainCount) {
$(over).appendTo('body');
}
retainCount++;
},
removeLoadingSpinner: function() {
retainCount--;
if (retainCount<=0) {
$('#custom-loading-overlay').remove();
retainCount = 0;
}
}
});
}(jQuery)); 위의 내용을 js 파일에 넣고 프로젝트 전체에 포함하십시오.
CSS 추가 :
#custom-loading-overlay {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
}
#custom-loading {
width: 50px;
height: 57px;
position: absolute;
top: 50%;
left: 50%;
margin: -28px 0 0 -25px;
}기도:
$.loadingSpinner();
$.removeLoadingSpinner();를 사용하여 ASP.Net MVC를 사용할 때는 using (Ajax.BeginForm(...설정이 ajaxStart작동하지 않습니다.
를 사용 AjaxOptions하여이 문제를 극복하십시오.
(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))당 https://www.w3schools.com/howto/howto_css_loader.asp 이없이 JS와 2 단계 과정이다 :
1. 스피너를 원하는 곳에이 HTML을 추가하십시오. <div class="loader"></div>
2.이 CSS를 추가하여 실제 스피너를 만드십시오.
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}$("#loader").toggle();애니메이션을 시작하기 위해 장시간 실행 요청을하기 전에 호출 할 수 있으며 요청의 콜백 함수에서 다른 호출을 수행하여 숨길 수 있습니다.
애니메이션에 CSS3을 사용합니다
/************ CSS3 *************/
.icon-spin {
font-size: 1.5em;
display: inline-block;
animation: spin1 2s infinite linear;
}
@keyframes spin1{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
/************** CSS3 cross-platform ******************/
.icon-spin-cross-platform {
font-size: 1.5em;
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin2 2s infinite linear;
}
@keyframes spin2{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
@-moz-keyframes spin2{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin2{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(359deg)}
}
@-o-keyframes spin2{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(359deg)}
}
@-ms-keyframes spin2{
0%{-ms-transform:rotate(0deg)}
100%{-ms-transform:rotate(359deg)}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
Default CSS3
<span class="glyphicon glyphicon-repeat icon-spin"></span>
</div>
<div class="col-md-6">
Cross-Platform CSS3
<span class="glyphicon glyphicon-repeat icon-spin-cross-platform"></span>
</div>
</div>