"Please Wait, Loading..."을 생성하려면 어떻게 해야 합니까?jQuery를 사용한 애니메이션?

"Please Wait, Loading..."을 생성하려면 어떻게 해야 합니까?jQuery를 사용한 애니메이션?

제 사이트에 "기다려주세요, 로딩" 회전 원 애니메이션을 넣고 싶습니다.jQuery를 사용하여 이 작업을 수행하려면 어떻게 해야 합니까?

당신은 이것을 다양한 방법으로 할 수 있습니다.페이지에 "로딩 중..."이라는 작은 상태가 표시되거나 새 데이터를 로드하는 동안 페이지를 회색으로 표시하는 전체 요소만큼 큰 소리일 수 있습니다.아래에서 제가 취하고 있는 접근 방식은 두 가지 방법을 모두 달성하는 방법을 참조하십시오.

설정

먼저 http://ajaxload.info 에서 멋진 "로딩" 애니메이션을 제공합니다.

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이벤트가 발생합니다.Ajax 이벤트가 시작되면 "loading" 클래스를 본문에 추가하고 이벤트가 완료되면 "loading" 클래스를 본문에서 제거합니다.

실제로 보기: http://jsfiddle.net/VpDUG/4952/

실제 로딩 이미지에 대해서는 이 사이트에서 다양한 옵션을 확인하십시오.

요청이 시작될 때 이 영상과 함께 DIV를 표시하는 한 다음과 같은 몇 가지 선택 사항이 있습니다.

이미지를 수동으로 표시 및 숨깁니다.

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

agaxStart 및 agaxComplete 사용:

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

이를 사용하면 요소가 모든 요청을 표시/숨깁니다.필요에 따라 좋거나 나쁠 수 있습니다.

특정 요청에 대해 개별 콜백 사용:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

Jonathan과 Samir가 제안한 것과 함께(둘 다 훌륭한 답변입니다. btw!) jQuery에는 에이잭스 요청을 할 때 실행할 수 있는 몇 가지 기본 제공 이벤트가 있습니다.

행사가 있습니다.

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

...그리고 그것은 형제야, 그 사건은

모든 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 통화에서 로드 이미지만 숨겨집니다.오류 상태를 처리하려면 를 조사해야 합니다. 이는 다음보다 더 복잡합니다.$.load,$.get등등, 하지만 훨씬 더 유연합니다.

조나단의 훌륭한 솔루션은 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();
    });

});

본문 태그를 닫기 전에 또는 적합하다고 생각되는 곳이라면 이 Javascript 블록을 페이지 끝에 추가하기만 하면 됩니다.

요청을 마다 Ajax #spinner됩니다.div 파일이 됩니다.요청이 완료되면 다시 숨겨집니다.

레일이 있는 터보링크를 사용하는 경우 이 방법이 제 솔루션입니다.

이것은 커피스크립트입니다.

$(window).on 'page:fetch', ->
  $('body').append("<div class='modal'></div>")
  $('body').addClass("loading")

$(window).on 'page:change', ->
  $('body').removeClass("loading")

이것은 조나단 샘슨의 첫 번째 훌륭한 답변에 기초한 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;
}

다른 게시물과 관련하여, 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" />

마크 H가 말한 것처럼UI가 방법입니다.

예:

<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/ 에서 agax-delay.gif를 받았습니다.

이렇게 하면 단추가 사라지고 대신 "로딩" 애니메이션이 나타나고 마지막으로 성공 메시지만 표시됩니다.

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

제가 본 대부분의 솔루션은 로딩 오버레이를 설계하거나, 숨겨두었다가 필요할 때 숨김을 해제하거나, 움짤이나 이미지 등을 보여주기를 기대합니다.

저는 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 파일에 넣어서 프로젝트 전체에 포함하면 됩니다.

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();

SVG 애니메이션이 이 문제에 대한 더 나은 해결책일 것입니다.당신은 CSS를 작성하는 것에 대해 걱정할 필요가 없을 것이고 GIF에 비해 더 나은 해상도와 알파 투명성을 얻을 것입니다.사용할 수 있는 매우 좋은 SVG 로딩 애니메이션은 다음과 같습니다. http://samherbert.net/svg-loaders/

당신은 또한 제가 만든 서비스인 https://svgbox.net/iconset/loaders 를 통해 직접 애니메이션을 사용할 수 있습니다.충전재를 사용자 정의할 수 있으며 직접 사용(핫링크)이 허용됩니다.

jQuery로 원하는 작업을 수행하려면 로드 정보 요소를 숨기고 사용해야 합니다..show()로더를 표시할 때 사용합니다.예를 들어, 이 코드는 1초 후에 로더를 표시합니다.

setTimeout(function() {
  $("#load").show();
}, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="load" style="display:none">
    Please wait... 
    <img src="//s.svgbox.net/loaders.svg?fill=maroon&ic=tail-spin" 
         style="width:24px">
</div>

ASP를 사용할 때는 이 점에 유의하십시오.NetMVC, 사용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>

폰타썸에는 이미 폰타썸을 사용하고 있다면 별도의 데이터 부담 없이 프로젝트에서 직접 사용할 수 있는 로딩 애니메이션 아이콘이 있습니다.

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

그런 다음 jquery는 다음 코드를 사용하여 요소 숨기기를 표시할 수 있습니다.

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(function() {  
    $('#loading').hide();
});

$('button').click(function(){
    $('#loading').toggle();
});

<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<body>
<div class="m-5"> <span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span> </div> 
<button class="btn btn-primary"> Click me to start or stop Ajax </button>
</body>

이 코드를 본문 태그에 추가합니다.

<div class="loader">
<div class="loader-centered">
    <div class="object square-one"></div>
    <div class="object square-two"></div>
    <div class="object square-three"></div>
</div>
</div>
<div class="container">
<div class="jumbotron">
    <h1 id="loading-text">Loading...</h1>
</div>
</div>

그리고 이 jquery 스크립트를 사용합니다.

<script type="text/javascript">

jQuery(window).load(function() {
//$(".loader-centered").fadeOut();
//in production change 5000 to 400
$(".loader").delay(5000).fadeOut("slow");
$("#loading-text").addClass('text-success').html('page loaded');
});
</script>

여기에서 작업하는 전체 예를 참조하십시오.

http://bootdey.com/snippets/view/page-loader

저는 또한 DB 응답 중에 사용자에게 일부 "정보"를 알리는 문제(과제)를 발견했습니다.

제 솔루션은 아마 여기에 제시된 것과 조금 다를 것입니다, 좋은 것입니까, 나쁜 것입니까?모르겠어요, 저한테는 충분했어요.

$.ajax({ 
    type: 'ajax',
    method: 'post',
    url: '<?php echo base_url()?>skargi/osluga_skarg',
    data: { full_date: full_date, head_title: head_title },
    //async: false,             
    dataType: 'json',
    beforeSend: function() { $body.addClass("loading"); },
    success: function(data) {   
        $body.removeClass("loading");

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" id="btn-submit" class="btn btn-info">Submit</button>

  <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loader" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" style="width:50px;padding-top: 15%;">
      <div class="modal-content text-center">
        <img src="https://i.gifer.com/ZZ5H.gif" />    
      </div>
    </div>
  </div>

jQuery

$(function() {
      $('#btn-submit').click(function() {
        $('#loadingModal').modal('show');
      });
    });

그것은 매우 간단합니다.

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

  <div id="cover"> <span class="glyphicon glyphicon-refresh w3-spin preloader-Icon"></span>Please Wait, Loading…</div>

  <h1>Dom Loaded</h1>
</body>

CSS

#cover {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #141526;
  z-index: 9999;
  font-size: 65px;
  text-align: center;
  padding-top: 200px;
  color: #fff;
  font-family:tahoma;
}

JS - JQuery

$(window).on('load', function () {
  $("#cover").fadeOut(1750);
});

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