ฉันจะสร้างภาพเคลื่อนไหว“ โปรดรอสักครู่กำลังโหลด…” โดยใช้ jQuery ได้อย่างไร

ฉันต้องการวางภาพเคลื่อนไหวเป็นวงกลม "โปรดรอสักครู่" บนเว็บไซต์ของฉัน ฉันควรทำสิ่งนี้ให้สำเร็จโดยใช้ jQuery อย่างไร

คุณสามารถทำสิ่งนี้ได้หลายวิธี อาจเป็นเพียงสถานะเล็ก ๆ บนหน้าเว็บที่ระบุว่า "กำลังโหลด ... " หรือดังเป็นองค์ประกอบทั้งหมดที่ทำให้หน้าเป็นสีเทาในขณะที่ข้อมูลใหม่กำลังโหลด วิธีที่ฉันทำด้านล่างจะแสดงให้คุณเห็นว่าจะทำอย่างไรให้สำเร็จทั้งสองวิธี

การตั้งค่า

เริ่มต้นด้วยการทำให้เรามีภาพเคลื่อนไหว "loading" ที่ดีจาก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ครั้งที่มีเหตุการณ์ถูกไล่ออก เมื่อกิจกรรมอาแจ็กซ์เริ่มขึ้นเราเพิ่มคลาส "การโหลด" ลงในเนื้อหา และเมื่อเหตุการณ์เสร็จสิ้นเราจะลบคลาส "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 มีเหตุการณ์บางอย่างที่สร้างขึ้นเพื่อคุณเมื่อทำการร้องขอ ajax

มี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();
 });

คุณสามารถคว้า GIF แบบเคลื่อนไหวของวงกลมหมุนได้จากAjaxloadซึ่งติดอยู่ที่ตำแหน่งใด ๆ ในลำดับความสำคัญไฟล์ของเว็บไซต์ จากนั้นคุณเพียงแค่ต้องเพิ่มองค์ประกอบ 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 จัดเตรียม hooks เหตุการณ์สำหรับเมื่อคำขอ 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 นี้ที่ส่วนท้ายของหน้าเว็บของคุณก่อนปิดแท็ก body หรือที่ใดก็ตามที่คุณเห็นว่าเหมาะสม

ตอนนี้เมื่อใดก็ตามที่คุณส่งคำขออาแจ็กซ์#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")

นี่คือ SASS CSS จากคำตอบแรกที่ยอดเยี่ยมจาก Jonathan Sampson

# 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: ฉันได้รับ ajax-loader.gif บนhttp://www.ajaxload.info/

ด้วยความเคารพจากโพสต์อื่น ๆ คุณมีวิธีแก้ไขที่ง่ายมากโดยใช้ 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 เพียงอย่างเดียวฉันสามารถแสดงหน้าจอการโหลดและฉีกมันเมื่องานเสร็จสมบูรณ์

ด้านล่างเป็นรหัส ขึ้นอยู่กับตัวอักษรที่ยอดเยี่ยมและ 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:

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>