جارٍ تحميل الرسالة

Question

البحث عن برنامج نصي JS، والذي سيظهر بعض رسالة (شيء مثل "جارٍ التحميل، يرجى الانتظار") حتى تقوم الصفحة بتحميل كافة الصور.

مهم - يجب ألا يستخدم أي إطار عمل JS (jquery، mootools، إلخ)، يجب أن يكون نص JS عاديًا.

يجب أن تختفي الرسالة عند تحميل الصفحة.

Answer 1

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

على أية حال، وهنا بعض التعليمات البرمجية.السحر هو الخاصية "الكاملة" في مجموعة document.images (كائنات الصورة).

// setup a timer, adjust the 200 to some other milliseconds if desired
var _timer = setInterval("imgloaded()",200); 

function imgloaded() {
  // assume they're all loaded
  var loaded = true;

  // test all images for "complete" property
  for(var i = 0, len = document.images.length; i < len; i++) {
    if(!document.images[i].complete) { loaded = false; break; }
  }

  // if loaded is still true, change the HTML
  if(loaded) {
    document.getElementById("msg").innerHTML = "Done.";

    // clear the timer
    clearInterval(_timer);
  }
};

بالطبع، هذا يفترض أن لديك بعض عناصر DIV في مكان ما:

<div id="msg">Loading...</div>

Answer 2

فقط قم بإضافة ثابت <div> إلى الصفحة، لإعلام المستخدم بأنه يتم تحميل الصفحة.ثم أضف window.onload معالج وإزالة div.

راجع للشغل، ما هو سبب هذا؟ألا يمتلك المستخدمون بالفعل مؤشرات تحميل الصفحة في متصفحاتهم؟

Answer 3

يجب عليك إجراء طلبات ajax غير متزامنة للصور وإضافة مكالمة مرة أخرى عند الانتهاء.
إليك بعض التعليمات البرمجية لتوضيح ذلك:

var R = new XMLHttpRequest();
R.onreadystatechange = function() {
  if (R.readyState == 4) {
    // Do something with R.responseXML/Text ...
    stopWaiting();
  }
};

Answer 4

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