복붙노트

[JQUERY] 어떻게 jQuery를 사용하여 "잠시 기다려주십시오로드 중 ..."애니메이션을 만들 수 있습니까?

JQUERY

어떻게 jQuery를 사용하여 "잠시 기다려주십시오로드 중 ..."애니메이션을 만들 수 있습니까?

해결법

  1. 1.이 여러 가지 방법으로 할 수 있습니다. 새로운 데이터가로드되는 동안 전체 요소가 페이지를 어지는으로는 큰 소리로 페이지에 작은 상태가 말을 "로드하는 중 ..."미묘한, 또는 수 있습니다. 내가 아래에 데려 갈거야 접근 방법 두 가지 방법을 수행하는 방법을 보여줍니다.

    이 여러 가지 방법으로 할 수 있습니다. 새로운 데이터가로드되는 동안 전체 요소가 페이지를 어지는으로는 큰 소리로 페이지에 작은 상태가 말을 "로드하는 중 ..."미묘한, 또는 수 있습니다. 내가 아래에 데려 갈거야 접근 방법 두 가지 방법을 수행하는 방법을 보여줍니다.

    이제 http://ajaxload.info에서 우리에게 좋은 "로드"애니메이션을 받고 시작하자 내가 사용하고있을거야

    하자 우리는 / 우리는 아약스 요청을하고 숨기기 언제든지 보여줄 수있는 요소를 만들 :

    <div class="modal"><!-- Place at bottom of page --></div>

    다음의 그것에게 약간의 감각을 줄 수 있습니다 :

    /* 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와에에 좋아. 이 다음 부분은 실제로 정말 간단하다 :

    $body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

    즉입니다! 우리는 ajaxStart 또는 ajaxStop 이벤트가 해고 신체 요소 언제에 일부 이벤트를 연결하고 있습니다. 아약스 이벤트 시작, 우리는 본체에 "로딩"클래스를 추가합니다. 이벤트가 완료되면, 우리 몸에서 "로드"클래스를 제거합니다.

    직접보기 : http://jsfiddle.net/VpDUG/4952/

  2. 2.지금까지 실제 로딩 이미지로, 옵션의 무리이 사이트를 확인하십시오.

    지금까지 실제 로딩 이미지로, 옵션의 무리이 사이트를 확인하십시오.

    지금까지 요청, 당신은 몇 가지 선택이 시작이 이미지와 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;
});

  3. 3.조나단과 사미르는 어떤 제안과 함께 (BTW 모두 우수한 답변을!), jQuery를 일부 Ajax 요청을 할 때 당신을 위해 화재거야 행사에 구축했다.

    조나단과 사미르는 어떤 제안과 함께 (BTW 모두 우수한 답변을!), jQuery를 일부 Ajax 요청을 할 때 당신을 위해 화재거야 행사에 구축했다.

    ajaxStart 이벤트가있다

    ... 그리고 그것의 형제의 ajaxStop 이벤트

    함께, 그들은 어떤 아약스 활동의 아무 곳이나 페이지에 무슨 일이 일어나고 진행 메시지를 보여줄 수있는 좋은 방법을 확인하십시오.

    HTML :

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

    스크립트:

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

  4. 4.당신은 Ajaxload에서 회전하는 원의 애니메이션 GIF를 잡아 수 있습니다 - 스틱 당신의 웹 사이트 파일 계층 구조 어딘가에. 그럼 당신은 올바른 코드와 HTML 요소를 추가하고, 작업이 완료되면이를 제거해야합니다. 이것은 매우 간단하다 :

    당신은 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();

    이 작업은 몇 가지주의 사항이있다 : 당신이 로딩 이미지를 표시 할 수있는 두 군데 이상이있는 경우 우선은, 당신은 KEP의 일단 어떻게 든 실행 얼마나 많은 통화를 추적하고, 그들이있어 단지 숨길 필요 해요 모두 다. 이것은 거의 모든 경우에 작동합니다 간단한 카운터를 사용하여 수행 할 수 있습니다.

    둘째, 이것은 단지 성공적인 AJAX 호출시 로딩 이미지를 숨 깁니다. 오류 상태를 처리하기 위해, 당신은 $ .load, $ 갔지 등보다 더 복잡하다 $ 아약스로 볼 필요가 있지만, 더 많은 유연성도 있습니다.

  5. 5.IE8에서 조나단의 우수한 솔루션 나누기 (애니메이션이 전혀 표시되지 않습니다). 이 문제를 해결하려면 CSS로 변경 :

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

  6. 6.jQuery를 AJAX를 요청 시작 및 종료시에 대한 이벤트 후크를 제공합니다. 당신은 당신의 로더를 보여주기 위해 다음에 연결할 수 있습니다.

    jQuery를 AJAX를 요청 시작 및 종료시에 대한 이벤트 후크를 제공합니다. 당신은 당신의 로더를 보여주기 위해 다음에 연결할 수 있습니다.

    예를 들어, 다음 사업부를 만들 :

    <div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

    당신의 스타일에 아무도 : 표시하지로 설정합니다. 당신은 당신이 원하는 식으로 스타일을 지정할 수 있습니다. 당신은 당신이 원하는 경우, Ajaxload.info에서 좋은 로딩 이미지를 생성 할 수 있습니다.

    그런 다음, 당신은 Ajax 요청을 보낼 때 자동으로 표시하기 위해 다음과 같은 것을 사용할 수 있습니다 :

    $(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

    간단하게 몸 태그를 닫는 어디든지 적합을보기 전에 페이지의 끝이 자바 스크립트 블록을 추가합니다.

    당신은 아약스 요청을 보낼 때마다 지금의 #spinner의 사업부가 표시됩니다. 요청이 완료되면, 다시 숨길 수 있습니다.

  7. 7.당신이 Turbolinks와 레일을 사용하는 경우이 내 솔루션입니다 :

    당신이 Turbolinks와 레일을 사용하는 경우이 내 솔루션입니다 :

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

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

  8. 8.마찬가지로 마크 H는 blockUI는 방법입니다 말했다.

    마찬가지로 마크 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/에 아약스 - loader.gif있어

  9. 9.다른 게시물에 대한 모든 존경으로, 당신은 더 이상 외부 리소스 나 파일을 사용하지 않고, CSS3 및 jQuery를 사용하여, 여기에 아주 간단한 해결책이있다.

    다른 게시물에 대한 모든 존경으로, 당신은 더 이상 외부 리소스 나 파일을 사용하지 않고, CSS3 및 jQuery를 사용하여, 여기에 아주 간단한 해결책이있다.

    $ ( '# 제출'). (함수 ()을 클릭합니다 { $ (이) .addClass ( 'button_loader') ATTR ( "가격", "."); window.setTimeout (함수 () { $ ( '# 제출') removeClass ( 'button_loader') ATTR ( "값", "\ u2713을")..; $ ( '# 제출') 소품 ( '장애인'참).; }, 3000); }); # 제출 : 초점 { 개요 : 없음; 개요없는 오프셋 : 없음; } .button { 표시 : 인라인 블록; 패딩 : 6 픽셀 12 픽셀; 여백 : 20 픽셀 8px; 폰트 사이즈 : 14px; 폰트 중량 : 400; 라인 높이 1.42857143; 텍스트 정렬 : 센터; 공백 : 파라미터 nowrap; 수직 정렬 : 중간; -ms-터치 조치 : 조작; 커서 : 포인터; -webkit-사용자 선택 : 없음; -moz - 사용자 선택 : 없음; -ms-사용자 선택 : 없음; 배경 이미지 : 없음; 국경 : 2 픽셀 고체 투명; 경계 반경 : 5px; 색상 : # 000; 배경 색상 : # b2b2b2; 국경 색상 : # 969696; } .button_loader { 배경 색상 : 투명; 국경 : 4 픽셀 고체 #의 f3f3f3; 경계 반경 : 50 %; 국경 정상 : 4 픽셀 고체 # 969696; 국경 바닥 : 4 픽셀 고체 # 969696; 폭 : 35px; 높이 : 35px; -webkit 애니메이션 : 스핀 0.8S 무한 선형; 애니메이션 : 스핀 선형 무한 0.8S; } @ 스핀 {-webkit-키 프레임 0 % {-webkit-변환 : 회전 (0deg)를; } 99 % {-webkit-변환 : 회전 (360deg)를; } } @keyframes 스핀 { 0 % {변환 : 회전 (0deg)를; } 99 % {변환 : 회전 (360deg)를; } } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

  10. 10.이 버튼은 다음 "로드"의 애니메이션이 자신의 자리에 나타나는 마지막 단지 성공 메시지를 표시 사라지게 할 것입니다.

    이 버튼은 다음 "로드"의 애니메이션이 자신의 자리에 나타나는 마지막 단지 성공 메시지를 표시 사라지게 할 것입니다.

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

  11. 11.나도 본 솔루션의 대부분은 우리가, 로딩 오버레이 디자인은 숨겨진 유지하고 다음 숨기기 취소 필요할 때, 또는, 등 GIF 또는 이미지를 표시 할 것으로 예상

    나도 본 솔루션의 대부분은 우리가, 로딩 오버레이 디자인은 숨겨진 유지하고 다음 숨기기 취소 필요할 때, 또는, 등 GIF 또는 이미지를 표시 할 것으로 예상

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

    아래는 코드입니다. 이 글꼴 최고 및 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();

  12. 12.((사용하여, Ajax.BeginForm을 ASP.Net MVC를 사용하는 경우 ..., 작업 ajaxStart을하지 않을 설정하는 것으로.

    ((사용하여, Ajax.BeginForm을 ASP.Net MVC를 사용하는 경우 ..., 작업 ajaxStart을하지 않을 설정하는 것으로.

    이 문제를 극복하기 위해 AjaxOptions를 사용하여

    (Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

  13. 13.https://www.w3schools.com/howto/howto_css_loader.asp 당이없는 JS와 2 단계 과정이다 :

    https://www.w3schools.com/howto/howto_css_loader.asp 당이없는 JS와 2 단계 과정이다 :

    당신이 스피너를 원하는이 HTML을 1.Add :

    실제 회 전자를 만들기 위해이 CSS를 2.Add :

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

  14. 14.나는 애니메이션 CSS3를 사용

    나는 애니메이션 CSS3를 사용

    / ************ CSS3 ************* / .icon 스핀 { 폰트 크기 : 1.5em; 표시 : 인라인 블록; 애니메이션 : spin1 2S 무한 선형; } @keyframes spin1 { 0 % {변환 : 회전 (0deg)} {100 % 변형 : 회전 (359deg)} } / ************** CSS3의 크로스 플랫폼 ****************** / .icon 스핀 크로스 플랫폼 { 폰트 크기 : 1.5em; 표시 : 인라인 블록; -moz 애니메이션 : 스핀 무한 선형 2S; -O-애니메이션 : 스핀 무한 선형 2S; -webkit 애니메이션 : 스핀 무한 선형 2S; 애니메이션 : 퍼플 슈핀 2S 무한 선형; } @keyframes 퍼플 슈핀 { 0 % {변환 : 회전 (0deg)} {100 % 변형 : 회전 (359deg)} } @ -moz-키 프레임 퍼플 슈핀 { {0 % - MOZ 변환 형 : 회전 (0deg)를} {100 % - MOZ 변환 형 : 회전 (359deg)를} } @ -webkit-키 프레임 퍼플 슈핀 { {0 % - 웹킷 변환 형 : 회전 (0deg)를} {100 % - 웹킷 변환 형 : 회전 (359deg)를} } @ -o - 키 프레임 퍼플 슈핀 { {0 % - O 변환 형 : 회전 (0deg)를} {100 % - O 변환 형 : 회전 (359deg)를} } @ -ms-키 프레임 퍼플 슈핀 { 0 % {- MS가-변환 : 회전 (0deg를)} 100 % {- MS가-변환 : 회전 (359deg를)} } <링크 HREF = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"REL = "스타일"/>

    기본 CSS3 <스팬 클래스 = "glyphicon glyphicon 반복 아이콘 스핀">
    크로스 플랫폼 CSS3 <스팬 클래스 = "glyphicon glyphicon 반복 아이콘 스핀 크로스 플랫폼">

  15. 15.몸 태그에이 코드를 배치

    몸 태그에이 코드를 배치

    <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

  16. 16.그것은 매우 간단합니다.

    그것은 매우 간단합니다.

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

    17. from https://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 자바 스크립트를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.25
[JQUERY] jQuery로 자바 스크립트 객체에서 선택하는 옵션을 추가하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.25
[JQUERY] 사용자가 입력을 멈출 때까지 어떻게 .keyup () 핸들러를 지연?  (0) 2020.09.25
[JQUERY] 어떻게 jQuery를 / 자바 스크립트로 JSON 데이터를 구문 분석?  (0) 2020.09.25
[JQUERY] 공식 방법은 무엇인가를 실행하기 전에 부하에 모든 이미지의 jQuery 대기를 물어  (0) 2020.09.25
,

티스토리툴바