عرض تحميل الصورة أثناء الطلبات غير المتزامنة

يمكن أن يؤدي تنفيذ الطلبات غير المتزامنة باستخدام $.ajax إلى حدوث ارتباك بسبب عدم وجود إشارة مرئية إلى عملية مستمرة. تستكشف هذه المقالة تقنيات إظهار صورة التحميل أثناء مثل هذه الطلبات.

للبدء، ينفذ مقتطف التعليمات البرمجية المقدم طلبًا غير متزامن إلى عنوان URL ويُلحق HTML المستلم بعنصر بالفئة "معلومات". لعرض صورة التحميل، يمكن استخدام عنصر صورة مع "معرف" من "صورة التحميل".

أحد الأساليب هو إظهار الصورة قبل تقديم الطلب وإخفائها بعد الانتهاء:

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

الطريقة الأكثر عمومية هي ربط صورة التحميل بأحداث ajaxStart وajaxStop العالمية. بهذه الطريقة، ستكون الصورة مرئية لجميع الطلبات غير المتزامنة:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

توفر هذه التقنيات إشارة سهلة الاستخدام للطلب غير المتزامن المستمر، مما يعزز تجربة المستخدم.