javascript - script - ¿Cómo se muestra el estado de carga con preloader y múltiples imágenes?

ha fallado la carga del<script> con origen

Question

Estoy construyendo una presentación de diapositivas con unos cientos de imágenes y me gustaría construir una barra de carga agradable, así que la idea era precargar las imágenes usando JavaScript, luego inicializar el resto de las palabras clave de la interfaz de usuario.

La precarga de las imágenes no es un problema, pero hacer que el navegador actualice el estado a medida que se carga la carga. He intentado algunas cosas, pero el navegador solo volverá a pintar la pantalla después de que termine.

Incluso he intentado el guión a partir de esta pregunta , pero obtengo los mismos resultados.

Esto es lo que tengo hasta ahora (imgList es una matriz de nombres de archivos. Estoy usando Prototype ).

var imageBuf = []
var loadCount = 0
$(''loadStatus'').update("0/"+imgList.length)

function init() {
    imgList.each(function(element){
        imageBuf[element] = new Image()
        //imageBuf[element].onload = window.setTimeout("count()",0) // gives "not implemented" error in IE
        imageBuf[element].onload = function(){count()}
        imageBuf[element].src = "thumbs/"+element
    })
}

function count() {
    loadCount++
    $(''loadStatus'').update(loadCount+"/"+imgList.length)
}

init()  

Answer 1

Intenta usar la función de mi respuesta a esta pregunta :

function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) {
  var itemIndex = 0;
  (function() {
    var remainingDataLength = (data.length - itemIndex);
    var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength;
    if(itemIndex < data.length) {
      while(currentChunkSize--) {
        workerCallback(data[itemIndex++]);
      }
      setTimeout(arguments.callee, timeout);
    } else if(completionCallback) {
      completionCallback();
    }
  })();
}


// here we are using the above function to take 
// a short break every time we load an image
function init() {
  incrementallyProcess(function(element) {
    imageBuf[element] = new Image();
    imageBuf[element].onload = function(){count()};
    imageBuf[element].src = "thumbs/"+element;
  }, imgList, 1, 250, function() { 
    alert("done loading"); 
  });
}

Es posible que desee modificar el parámetro de tamaño de fragmento así como la duración del tiempo de espera para que se comporte como usted lo desea. No estoy 100% seguro de que esto funcione para ti, pero vale la pena intentarlo ...