كيفية إظهار الدوار أثناء تحميل الصورة عبر JavaScript

Question

أنا أعمل حاليًا على تطبيق ويب يحتوي على صفحة تعرض مخططًا واحدًا (صورة بتنسيق png).توجد في جزء آخر من هذه الصفحة مجموعة من الروابط التي، عند النقر عليها، يتم إعادة تحميل الصفحة بأكملها وتبدو تمامًا كما كانت من قبل باستثناء المخطط الموجود في منتصف الصفحة.

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

لقد قمت بذلك عبر JavaScript، والذي يعمل حتى الآن، باستخدام الكود التالي

document.getElementById('chart').src = '/charts/10.png';

المشكلة هي أنه عندما ينقر المستخدم على الرابط، قد يستغرق الأمر بضع ثوانٍ قبل أن يتغير المخطط.وهذا يجعل المستخدم يعتقد أن نقرته لم تفعل أي شيء، أو أن النظام بطيء في الاستجابة.

ما أريد أن يحدث هو عرض مؤشر الدوار/الخفقان/الحالة، في مكان الصورة أثناء التحميل، لذلك عندما ينقر المستخدم على الرابط، يعرف على الأقل أن النظام قد أخذ مدخلاته ويفعل شيئًا حيال ذلك .

لقد جربت بعض الاقتراحات، حتى أنني استخدمت مهلة psudo لإظهار القرص الدوار، ثم عد إلى الصورة.

الاقتراح الجيد الذي تلقيته هو استخدام ما يلي

<img src="/charts/10.png" lowsrc="/spinner.gif"/>

والذي سيكون مثاليًا، باستثناء أن القرص الدوار أصغر بكثير من المخطط الذي يتم عرضه.

هل هناك أي أفكار أخرى؟

Answer 1

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

function PreloadImage(imgSrc, callback){
  var objImagePreloader = new Image();

  objImagePreloader.src = imgSrc;
  if(objImagePreloader.complete){
    callback();
    objImagePreloader.onload=function(){};
  }
  else{
    objImagePreloader.onload = function() {
      callback();
      //    clear onLoad, IE behaves irratically with animated gifs otherwise
      objImagePreloader.onload=function(){};
    }
  }
}

Answer 2

يمكنك إظهار صورة ثابتة تعطي الوهم البصري للعجلة الدوارة، مثل هذه.

Answer 3

باستخدام حمولة() طريقة مسج, فمن الممكن بسهولة القيام بشيء ما بمجرد تحميل الصورة:

$('img.example').load(function() {
  $('#spinner').fadeOut();
});

يرى: http://api.jquery.com/load-event/

Answer 4

استخدم قوة الدالة setTimeout() (مزيد من المعلومات) - يتيح لك ذلك ضبط مؤقت لبدء استدعاء دالة في المستقبل واستدعائها متعود منع تنفيذ الوظائف الحالية / الأخرى (غير متزامنة).

ضع div الذي يحتوي على القرص الدوار أعلى صورة المخطط، مع تعيين سمة عرض css الخاصة به على لا شيء:

<div>&nbsp;<img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>

يقوم nbsp بإيقاف div من الانهيار عند إخفاء القرص الدوار.بدونها، عندما تقوم بتبديل عرض القرص الدوار، سوف "يرتعش" تخطيطك

function chartOnClick() {
  //How long to show the spinner for in ms (eg 3 seconds)
  var spinnerShowTime = 3000

  //Show the spinner
  document.getElementById('spinnerImg').style.display = "";

  //Change the chart src
  document.getElementById('chart').src = '/charts/10.png';

  //Set the timeout on the spinner
  setTimeout("hideSpinner()", spinnerShowTime);
}

function hideSpinner() {
  document.getElementById('spinnerImg').style.display = "none";
}

Answer 5

استخدم CSS لتعيين الرسوم المتحركة للتحميل كصورة خلفية مركزية لحاوية الصورة.

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

على سبيل المثال

document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';

أثناء تحميل Large_image.jpg، ستظهر الخلفية من خلال صورة GIF شفافة بحجم 1 بيكسل.

Answer 6

بناءً على إجابة إد، أفضل أن أرى شيئًا مثل:

function PreLoadImage( srcURL, callback, errorCallback ) {
     var thePic = new Image();

     thePic.onload = function() {
          callback();
          thePic.onload = function(){};
     }

     thePic.onerror = function() {
          errorCallback();
     }
     thePic.src = srcURL;
}

يمكن لرد الاتصال الخاص بك عرض الصورة في مكانها الصحيح والتخلص من/إخفاء القرص الدوار، ويمنع رد الاتصال الخاص بك صفحتك من "كرة الشاطئ".كل الأحداث مدفوعة، بدون مؤقتات أو استطلاعات، بالإضافة إلى أنك لا تحتاج إلى إضافة عبارات if الإضافية للتحقق مما إذا كانت الصورة قد اكتمل تحميلها أثناء قيامك بإعداد الأحداث الخاصة بك - نظرًا لأنه تم إعدادها مسبقًا، فسيتم تشغيلها بغض النظر عن كيفية تشغيلها يتم تحميل الصور بسرعة.

Answer 7

لقد كتبت منذ بعض الوقت مكونًا إضافيًا لـ jQuery والذي يتعامل مع عرض القرص الدوار تلقائيًا http://denysonique.github.com/imgPreload/

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

Answer 8

تعجبني طريقة jquery الخاصة بـ @duddle ولكني أجد أن التحميل () لا يتم استدعاؤه دائمًا (على سبيل المثال عند استرداد الصورة من ذاكرة التخزين المؤقت في IE).أستخدم هذا الإصدار بدلاً من ذلك:

$('img.example').one('load', function() {
  $('#spinner').remove();
}).each(function() {
  if(this.complete) {
    $(this).trigger('load');
  }
});

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

Answer 9

ضع القرص الدوار في div بنفس حجم المخطط، فأنت تعرف الارتفاع والعرض حتى تتمكن من استخدام الموضع النسبي لتوسيطه بشكل صحيح.

Answer 10

بصرف النظر عن خيار lowsrc، فقد استخدمت أيضًا ملف background-image على ال imgحاوية.

Answer 11

انتبه إلى أنه يتم استدعاء وظيفة رد الاتصال أيضًا في حالة عدم وجود الصورة src (خطأ http 404).لتجنب ذلك يمكنك التحقق من عرض الصورة، مثل:

if(this.width == 0) return false;

Answer 12

يبدو حل @ iAn جيدًا بالنسبة لي.الشيء الوحيد الذي سأغيره هو أنه بدلاً من استخدام setTimeout، سأحاول ربط حدث "تحميل" الصور.بهذه الطريقة، إذا استغرق تنزيل الصورة وقتًا أطول من 3 ثوانٍ، فستظل تحصل على القرص الدوار.

ومن ناحية أخرى، إذا استغرق التنزيل وقتًا أقل، فستحصل على القرص الدوار لمدة أقل من 3 ثوانٍ.

Answer 13

أود أن أضيف بعض الأرقام العشوائية لتجنب ذاكرة التخزين المؤقت للمتصفح.