معنى - jquery effects




كيف يمكنني إنشاء رسم "الرجاء الانتظار ، التحميل..." باستخدام jQuery؟ (10)

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


إذا كنت تستخدم 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;
}

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

بقدر عرض 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;
});

جنبا إلى جنب مع ما اقترحه جوناثان وسمير (كلا الإجابات الممتازة بالمناسبة!) ، يحتوي 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();
 });

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

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

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

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

مثل مارك 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>

ملاحظة: حصلت على ajax-loader.gif على http://www.ajaxload.info/


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

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

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

وانشاء

لنبدأ بالحصول على صورة "تحميل" لطيفة من 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/


يمكنني استخدام 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>


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





animation