animation معنى - كيف يمكنني إنشاء رسم "الرجاء الانتظار ، التحميل..." باستخدام jQuery؟




برنامج animate (13)

إذا كنت تستخدم 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 بناءً على أول إجابة ممتازة من جوناثان سامبسون

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

أرغب في وضع رسم متحرك لدائرة الغزل على "موقعي يرجى الانتظار والتحميل". كيف يجب أن أقوم بذلك باستخدام jQuery؟


هذا من شأنه أن يجعل الأزرار تختفي ، ثم تظهر الرسوم المتحركة لـ "التحميل" في مكانها وأخيراً تعرض رسالة نجاح.

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

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

بقدر الصورة الفعلية للتحميل ، تحقق من هذا الموقع لمجموعة من الخيارات.

بقدر عرض DIV بهذه الصورة عند بدء الطلب ، لديك عدة خيارات:

أ) إظهار وإخفاء الصورة يدويًا:

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

ب) استخدم ajaxStart و ajaxComplete :

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

يمكنك الحصول على 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();
}

تحتاج بعد ذلك فقط إلى استخدام هذه الطرق في مكالمة أجاكس الخاصة بك:

$.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 وما شابه ، ولكن أكثر مرونة أيضًا.


جنبا إلى جنب مع ما اقترحه جوناثان وسمير (كلا الإجابات الممتازة بالمناسبة!) ، يحتوي jQuery على بعض الأحداث التي سوف تطلقها عليك عند تقديم طلب اجاكس.

هناك الحدث ajaxStart

أظهر رسالة تحميل كلما بدأ طلب AJAX (ولم يكن أي منها نشطًا بالفعل).

... وهو أخي ، الحدث ajaxStop

إرفاق وظيفة ليتم تنفيذها كلما انتهت جميع طلبات AJAX. هذا هو حدث اياكس.

معًا ، يقومون بعمل طريقة جيدة لإظهار رسالة تقدم عندما يحدث أي نشاط في أي مكان على الصفحة.

HTML:

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

النصي:

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

في https://www.w3schools.com/howto/howto_css_loader.asp ، هذه عملية من خطوتين بدون JS:

1. أضف HTML هذا حيث تريد الدوار: <div class="loader"></div>

2. إضافة هذا المغلق لجعل الدوار الفعلي:

.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 و 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" />


تتوقع معظم الحلول التي رأيتها إما تصميم تراكب تحميل وإبقائه مخفيًا ثم إلغاء إخفاءه عند الحاجة ، أو إظهار صورة gif أو صورة وما إلى ذلك.

كنت أرغب في تطوير مكون إضافي قوي ، حيث يمكنني من خلال مكالمة jQuery ببساطة عرض شاشة التحميل وتقليص حجمها عند اكتمال المهمة.

أدناه هو الرمز. ذلك يعتمد على Font awesome و jQuery:

/**
 * Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
 **/


(function($){
    // Retain count concept: http://.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://.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();

يوفر 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 ، سيتم عرض div #spinner div. عند اكتمال الطلب ، سيتم إخفاؤه مرة أخرى.


لاحظ أنه عند استخدام ASP.Net MVC ، using (Ajax.BeginForm(... ، لن يعمل إعداد ajaxStart .

استخدم AjaxOptions للتغلب على هذه المشكلة:

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

هل يمكن أن تفعل هذا بطرق مختلفة مختلفة. يمكن أن يكون الأمر دقيقًا كحالة صغيرة في الصفحة تقول "جارٍ التحميل ..." أو بصوت عالٍ مثل عنصر كامل يظهر باللون الرمادي خارج الصفحة أثناء تحميل البيانات الجديدة. سيوضح لك النهج الذي أتبعه أدناه كيفية إنجاز كلتا الطريقتين.

وانشاء

لنبدأ بالحصول على صورة "تحميل" لطيفة من http://ajaxload.info سأستخدمها

لنقم بإنشاء عنصر يمكننا إظهاره / إخفاؤه في أي وقت نقوم فيه بتقديم طلب ajax:

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

وأخيرا ، مسج

حسنا ، إلى مسج. هذا الجزء التالي بسيط حقًا:

$body = $("body");

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

هذا هو! نحن ajaxStart بعض الأحداث على العنصر الأساسي في أي وقت ajaxStart ajaxStop أحداث ajaxStop أو ajaxStop . عندما يبدأ حدث ajax ، نضيف فئة "التحميل" إلى النص. وعندما تتم الأحداث ، نزيل فئة "التحميل" من الجسم.

رؤيته في العمل: http://jsfiddle.net/VpDUG/4952/


ثلاثة خيارات:

  1. إذا كان script هو آخر علامة في النص الأساسي ، فسيكون DOM جاهزًا قبل تنفيذ علامة البرنامج النصي
  2. عندما يكون DOM جاهزًا ، سيتغير "readyState" إلى "مكتمل"
  3. ضع كل شيء ضمن قائمة إصغاء أحداث "DOMContentLoaded"

onreadystatechange

  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

المصدر: MDN

DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

قلق بشأن متصفحات العصر الحجري: اذهب إلى شفرة مصدر jQuery واستخدم الدالة ready . في هذه الحالة ، فأنت لا تقوم بتحليل + تنفيذ المكتبة بأكملها ، فأنت تقوم فقط بجزء صغير منها.





jquery animation