javascript - ¿Cómo funcionan los precargadores de imágenes?

html image

Question

Me cuesta entender cómo funcionan los precargadores de imágenes en java-script. Entonces, si alguien pudiera explicar cómo funcionan con un ejemplo que ayudaría mucho. no jquery

Answer 1

Cargando una sola imagen

El navegador cargará imágenes de forma asíncrona ... lo que significa que cuando el navegador recibe el .src de una imagen, comenzará a cargar esa imagen en segundo plano, pero también continuará procesando el código de JavaScript directamente después de .src

// create a new image object
var img=new Image();

// set the image object''s image source
img.src=''myImage.png'';

// do some stuff while the image is loading in the background
alert(''Your image has started loading, but is not yet complete'');

La alerta se mostrará incluso antes de que la imagen esté completamente cargada y lista para usar.

Entonces, ¿cómo saber cuándo la imagen está completamente cargada y lista para usar?

Respuesta: Puede decirle al navegador que "le devuelva la llamada" cuando termine de cargar la imagen. Se le "devuelve la llamada" agregando una función "img.onload" en el objeto de imagen. Cada vez que el navegador termine de cargar la imagen, activará el código en la función "img.onload".

img.onload = theImageHasFinishedLoading;

function theImageHasFinishedLoad(){
    alert(''Your image has finished loading...you can use it now'');
}

El proceso completo de carga de imágenes ocurrirá en esta secuencia:

// happens 1st
var img=new Image();

// happens 2nd: this callback is ASSIGNED, but NOT TRIGGERED yet
//     until the image has fully loaded
img.onload = theImageHasFinishedLoading;

// happens 3rd
img.src=''myImage.png'';

// happens 4th
alert(''Your image has started loading, but is not yet complete'');

// happens 5th after the browser has fully loaded the image
//     (The browser will call this function automatically because .onload was set)
function theImageHasFinishedLoad(){
    alert(''Your image has finished loading...you can use it now'');
}

Precargar múltiples imágenes

Para precargar varias imágenes:

• Cree una matriz para contener todas las URL de sus imágenes y agregue las URL de sus imágenes a esta matriz.

  // For example
  var imageURLs=[];
  imageURLs[0]=''myImage.png'';

• Cree una matriz para contener todos sus objetos de imagen (== sus imágenes reales).

  // For example
  var imgs=[];

• Agregue new Image elementos de imagen a la matriz de objetos de imagen (agregue una new Image para cada URL en la matriz de URL).

  //For example
  imgs[0] = new Image();

• Establezca la devolución de llamada .onload cada objeto de .onload a la misma función.

  // For example
  imgs[0].onload = theImageHasFinishedLoading;

• Use la matriz de URL de imagen para establecer el .src de cada imagen en la url individual.

  // For example
  imgs[0].src = imageURLs[0];

• En la theImageHasFinishedLoading llamada theImageHasFinishedLoading , incremente un contador cada vez que se carga con éxito una nueva imagen.

  // For example
  var counter=0;
  
  function theImageHasFinishedLoading(){
      counter++;
  }

Sabrá que todas las imágenes se cargan completamente cuando el contador alcanza la misma longitud que la matriz de URL de su imagen.

    function theImageHasFinishedLoading(){
        counter++;
        if(counter>=imageURLs.length){
            alert(''All the images have successfully preloaded. Go use them now!'');
        }
    } 

Aquí hay un código de ejemplo completo y una demostración:

window.onload=(function(){


  // canvas related variables
  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;

  // put the paths to your images in imageURLs[]
  var imageURLs=[];  
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");

  // the loaded images will be placed in imgs[]
  var imgs=[];
  var imagesOK=0;
  startLoadingAllImages(imagesAreNowLoaded);

  // Create a new Image() for each item in imageURLs[]
  // When all images are loaded, run the callback (==imagesAreNowLoaded)
  function startLoadingAllImages(callback){

    // iterate through the imageURLs array and create new images for each
    for (var i=0; i<imageURLs.length; i++) {
      // create a new image an push it into the imgs[] array
      var img = new Image();
      // Important! By pushing (saving) this img into imgs[],
      //     we make sure the img variable is free to
      //     take on the next value in the loop.
      imgs.push(img);
      // when this image loads, call this img.onload
      img.onload = function(){ 
        // this img loaded, increment the image counter
        imagesOK++; 
        // if we''ve loaded all images, call the callback
        if (imagesOK>=imageURLs.length ) {
          callback();
        }
      };
      // notify if there''s an error
      img.onerror=function(){alert("image load failed");} 
      // set img properties
      img.src = imageURLs[i];
    }      
  }

  // All the images are now loaded
  // Do drawImage & fillText
  function imagesAreNowLoaded(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    ctx.font="30px sans-serif";
    ctx.fillStyle="#333333";

    // drawImage the first image (face1.png) from imgs[0]
    // and fillText its label below the image
    ctx.drawImage(imgs[0],0,10);
    ctx.fillText("face1.png", 0, 135);

    // drawImage the first image (face2.png) from imgs[1]
    // and fillText its label below the image
    ctx.drawImage(imgs[1],200,10);
    ctx.fillText("face2.png", 210, 135);

  }



}); // end window.onload

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=400 height=200></canvas>