javascript - content - meta property w3schools

JavaScript precargando imágenes

Question

¿Puede decirme si la función que escribí a continuación es suficiente para precargar imágenes en la mayoría de los navegadores, si no todos, que se usan comúnmente en la actualidad?

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

Tengo una matriz de imageURLs que hago un bucle y llamo a la función preloadImage para cada URL.

Answer 1

Alternativa CSS2: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

body:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none; 
}

Alternativa CSS3: https://perishablepress.com/preload-images-css3/ (Presa H / T Linh)

.preload-images {
  display: none; 
  width: 0;
  height: 0;
  background: url(img01.jpg),
              url(img02.jpg),
              url(img03.jpg);
}

NOTA: Imágenes en un contenedor con display:none podría precargarse. Quizás visibilidad: oculto funcionará mejor, pero no lo he probado. Gracias Marco Del Valle por señalar esto

Answer 2

Aquí está mi enfoque:

var preloadImages = function (srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image;
        img.onload = function () {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
};

Answer 3

En mi caso, fue útil agregar una devolución de llamada a su función para el evento onload:

function preloadImage(url, callback)
{
    var img=new Image();
    img.src=url;
    img.onload = callback;
}

Y luego envolverlo para el caso de un conjunto de URL a las imágenes para ser precargado con devolución de llamada en todo se hace: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log(''Number of loaded images: '' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.src = url;
      img.onload = anImageLoadedCallback;
  }
}

// Let''s call it:
preloadImages([
    ''//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg'',
  ''//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg''
], function(){
    console.log(''All images were loaded'');
});

Answer 4

Este enfoque es un poco más elaborado. Aquí almacena todas las imágenes precargadas en un contenedor, puede ser un div. Y después de que puedas mostrar las imágenes o moverlas dentro del DOM a la posición correcta.

function preloadImg(containerId, imgUrl, imageId) {
    var i = document.createElement(''img''); // or new Image()
    i.id = imageId;
    i.onload = function() {
         var container = document.getElementById(containerId);
         container.appendChild(this);
    };
    i.src = imgUrl;
}

Pruébalo aquí , también he agregado algunos comentarios

Answer 5

Prueba esto, creo que esto es mejor.

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

//-- usage --//
preload(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)

Fuente: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 6

Sí, esto funcionará; sin embargo , los navegadores limitarán (entre 4 y 8) las llamadas reales y, por lo tanto, no almacenarán ni precargarán todas las imágenes deseadas.

Una mejor forma de hacerlo es llamar a onload antes de usar la imagen de esta manera:

function (imageUrls, index) {  
    var img = new Image();

    img.onload = function () {
        console.log(''isCached: '' + isCached(imageUrls[index]));
        *DoSomething..*

    img.src = imageUrls[index]
}

function isCached(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    return img.complete || (img .width + img .height) > 0;
}

Answer 7

Sí. Esto debería funcionar en todos los principales navegadores.

Answer 8

Te recomiendo que uses un try / catch para evitar algunos posibles problemas:

OOP:

    var preloadImage = function (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Estándar:

    function preloadImage (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Además, aunque me encanta DOM, los navegadores estúpidos pueden tener problemas con DOM, así que evítenlo en mi humilde opinión, en contra de la contribución de freedev. Image () tiene mejor soporte en los viejos buscadores de basura.