jQuery를 사용하여“Please Wait, Loading…”애니메이션을 어떻게 만들 수 있습니까?

jQuery를 사용하여“Please Wait, Loading…”애니메이션을 어떻게 만들 수 있습니까?

---

내 사이트에 "잠시 기다려주십시오.로드 중"회전하는 원 애니메이션을 배치하고 싶습니다. jQuery를 사용하여 어떻게해야합니까?

---

다양한 방법으로이 작업을 수행 할 수 있습니다. 페이지에서 "로드 중 ..."이라는 작은 상태로 미묘하거나 새 데이터가로드되는 동안 전체 요소가 페이지를 회색으로 표시하는 것처럼 시끄러울 수 있습니다. 아래에서 취하는 접근 방식은 두 가지 방법을 모두 수행하는 방법을 보여줍니다.

설정

이제부터 우리에게 좋은 "로드"애니메이션을 받고 시작하자 http://ajaxload.info I을 사용할 것

ajax 요청을 할 때마다 표시 / 숨길 수있는 요소를 만들어 보겠습니다.

<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"클래스를 추가합니다. 이벤트가 완료되면 본문에서 "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;
});

---

Jonathan과 Samir가 제안한 것 (모두 훌륭한 답변 btw!)과 함께 jQuery에는 ajax 요청을 할 때 실행되는 이벤트가 내장되어 있습니다.

있다 ajaxStart이벤트

AJAX 요청이 시작될 때마다 로딩 메시지를 표시합니다 (이미 활성화 된 요청이 없음).

... 그리고 그것은 형제, ajaxStop이벤트

모든 AJAX 요청이 종료 될 때마다 실행할 함수를 첨부하십시오. 이것은 Ajax 이벤트입니다.

함께, 그들은 페이지의 어디에서나 ajax 활동이 발생할 때 진행 메시지를 표시하는 좋은 방법을 만듭니다.

HTML :

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

스크립트:

$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

---

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등,하지만 훨씬 더 유연한도.

---

Jonathon의 탁월한 솔루션은 IE8에서 중단됩니다 (애니메이션이 전혀 표시되지 않음). 이 문제를 해결하려면 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 또는 이미지 등을 표시 할 것으로 예상합니다.

간단한 jQuery 호출로 로딩 화면을 표시하고 작업이 완료되면 분해 할 수있는 강력한 플러그인을 개발하고 싶었습니다.

아래는 코드입니다. 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 파일에 넣고 프로젝트 전체에 포함하면됩니다.

기도:

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

---

애니메이션에 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>

참고 URL : https://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery