كيفية إظهار الدوار التحميل في jQuery ؟

Question

في النموذج أنا يمكن أن تظهر "تحميل..." صورة مع هذا الرمز:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

في مسج, يمكنني تحميل صفحة الخادم إلى عنصر مع هذا:

$('#message').load('index.php?pg=ajaxFlashcard');

ولكن كيف يمكنني إرفاق الدوار التحميل إلى هذا الأمر كما فعلت في النموذج ؟

Answer 1

وهناك زوجين من الطرق.بلدي المفضل هو إرفاق وظيفة ajaxStart/إيقاف الأحداث على العنصر نفسه.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

على ajaxStart/إيقاف وظائف النار كلما كنت تفعل أي المكالمات اياكس.

التحديث:كما مسج 1.8, الولايات الوثائق التي .ajaxStart/Stop يجب فقط أن تعلق document.وهذا من شأنه تحويل أعلاه مقتطف:

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

Answer 2

بالنسبة مسج يمكنني استخدام

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Answer 3

يمكنك فقط استخدام مسج ل .ajax وظيفة و استخدام الخيار beforeSend وتحديد بعض الوظائف التي يمكن أن تظهر ما يشبه محمل div على نجاح الخيار يمكنك إخفاء ذلك محمل div.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

هل يمكن أن يكون أي الغزل صورة Gif.هنا هو موقع كبير اياكس محمل مولد وفقا نظام الألوان الخاص بك: http://ajaxload.info/

Answer 4

يمكنك إدراج الصور المتحركة في DOM قبل اياكس الاتصال, و لا مضمنة وظيفة لإزالة ذلك...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

هذا سوف تأكد من الرسوم المتحركة الخاصة بك يبدأ في نفس الإطار على الطلبات اللاحقة (إذا كان ذلك من المسائل).علما أن الإصدارات القديمة من إنترنت إكسبلورر قد صعوبات مع الرسوم المتحركة.

حظا سعيدا!

Answer 5

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

Answer 6

إذا كنت تستخدم $.ajax() يمكنك استخدام شيء مثل هذا:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  

Answer 7

استخدام تحميل البرنامج المساعد: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

Answer 8

البديل:لدي أيقونة مع id="logo" في الجزء العلوي الأيسر من الصفحة الرئيسية ؛ غزال gif ثم مضافين على رأس (الشفافية) عندما ajax يعمل.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});

Answer 9

انتهى بي الأمر مع اثنين من التغييرات الرد الأصلي.

1. كما مسج 1.8, ajaxStart و ajaxStop يجب فقط أن تعلق document.وهذا يجعل من الصعب تصفية سوى بعض من طلبات اياكس.سو...
2. التحول إلى ajaxSend و ajaxComplete يجعل من الممكن interspect الحالي طلب اياكس قبل أن تظهر الدوار.

هذا هو الكود بعد هذه التغييرات:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

Answer 10

أريد أيضا أن تسهم هذه الإجابة.كنت أبحث عن شيء مشابه في مسج و هذا ما انتهى في نهاية المطاف باستخدام.

حصلت على الدوار التحميل من http://ajaxload.info/.الحل هو بناء على هذه الإجابة بسيطة في http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

الأساس الخاص بك ترميز HTML و CSS تبدو مثل هذا:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

ثم رمز مسج ننظر بشيء من هذا القبيل:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

هو بهذه البساطة :)

Answer 11

يمكنك ببساطة تعيين محمل الصورة على نفس العلامة التي بعدها سيتم تحميل المحتوى باستخدام اياكس الاتصال:

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

يمكنك أيضا استبدال span الوسم مع صورة العلامة.

Answer 12

وكذلك وضع التخلف العالمية على اياكس الأحداث ، يمكنك ضبط السلوك على عناصر محددة.ربما مجرد تغيير الفئة سيكون كافيا ؟

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

مثال CSS لإخفاء #myForm مع غزل:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}

Answer 13

لاحظ أنه يجب استخدام الاتصالات غير المتزامنة على المغازل العمل (على الأقل هذا هو ما تسبب لي أن لا تظهر حتى بعد اياكس الاتصال ثم ذهب بسرعة بعيدا عن الدعوة قد انتهى و إزالة الدوار).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

Answer 14

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

Answer 15

لقد استعملت ما يلي مع واجهة المستخدم مسج الحوار.(ربما يعمل مع اياكس الاسترجاعات؟)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

يحتوي على الرسوم المتحركة gif التحميل حتى محتواه هو استبدال عندما اياكس الاتصال يكمل.

Answer 16

هذا هو أفضل وسيلة بالنسبة لي:

مسج:

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

القهوة:

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

مستندات: ajaxStart, ajaxStop

Answer 17

جافا سكريبت

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

Answer 18

هذا هو بسيط جدا و ذكية المساعد تحديدا لهذا الغرض:https://github.com/hekigan/is-loading

Answer 19

أنا أفعل هذا:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

Answer 20

أعتقد أنك على حق.هذا الأسلوب هو أيضا العالمية...

ومع ذلك - هو الافتراضي عند اياكس الاتصال ليس له أي تأثير على الصفحة نفسها.(حفظ الخلفية على سبيل المثال).( يمكنك دائما التبديل تشغيله لفترة معينة اياكس الاتصال عن طريق تمرير "العالمية":false - انظر الوثائق في مسج

عندما اياكس الاتصال يهدف إلى تحديث جزء من الصفحة ، أنا أحب بلدي "تحميل" الصور أن تكون محددة إلى تحديث القسم.أود أن أرى أي جزء يتم تحديث.

تخيل كم سيكون ذلك رائعا إذا كنت يمكن ببساطة كتابة شيء من هذا القبيل :

$("#component_to_refresh").ajax( { ... } ); 

وهذا من شأنه أن تظهر "التحميل" في هذا القسم.أدناه هي وظيفة كتبت أن يعالج "تحميل" عرض كذلك ولكن هو خاص إلى المنطقة التي هي منعش في اياكس.

الأول, اسمحوا لي أن تظهر لك كيفية استخدامه

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

وهذا هو وظيفة أساسية تبدأ من أنه يمكنك تعزيز كما يحلو لك.أنها مرنة جدا.

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

Answer 21

إذا كنت لا ترغب في كتابة التعليمات البرمجية الخاصة بك, هناك أيضا الكثير من الإضافات التي تفعل ذلك:

• https://github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Answer 22

إذا كنت تخطط لاستخدام لودر في كل مرة كنت جعل الخادم الطلب ، يمكنك استخدام النمط التالي.

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

هذا الرمز على وجه الخصوص يستخدم jajaxloader المساعد (الذي أنا خلقت فقط)

https://github.com/lingtalfi/JAjaxLoader/

Answer 23

بلدي اياكس رمز يشبه هذا, في الواقع, لقد علق بها المتزامن:كاذبة خط الدوار يظهر.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

أنا يظهر الدوار داخل دالة أمام اياكس كود:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

Html, لقد استخدمت الخط رهيبة الدرجة:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

آمل أن يساعد شخص ما.

Answer 24

يمكنك دائما استخدام كتلة واجهة المستخدم مسج البرنامج المساعد الذي يفعل كل شيء بالنسبة لك, وحتى كتل الصفحة من أي مساهمة في حين اياكس التحميل.في حالة أن البرنامج المساعد يبدو أن لا تعمل, يمكنك أن تقرأ عن الطريقة الصحيحة لاستخدامه في هذه الإجابة. التحقق من ذلك.