1

Estoy haciendo un pequeño proyecto con Angular y tengo una serie de imagenes que se van pasando de fondo. La cosa es que como no están almacenadas en la memoria, cada vez que se va a visualizar por primera vez cada imagen, se ve como un pequeño salto, un pantallazo en blanco hasta que la imagen ha sido cargada.

Me gustaría poder evitar esto por que es incómodo y nada estético.

El código del Script es este:

      var objFoto = "../../../assets/img/fondo.jpg";
      var objFoto1 = "../../../assets/img/fondo1.jpg";
      var objFoto2 = "../../../assets/img/fondo2.jpg";
      var objFoto3 = "../../../assets/img/fondo3.jpg";
      var objFoto4 = "../../../assets/img/fondo4.jpg";
      var imagenes = [objFoto, objFoto1, objFoto2, objFoto3, objFoto4];
      var numImagen = 1;

      setInterval(function () {
        var imgActual = imagenes[numImagen];
        var dir = imgActual;
        document.getElementById("pag-index").style.backgroundImage = "url(" + dir + ")";

        if (numImagen + 1 == imagenes.length) {
          numImagen = 0;
        } else {
          numImagen++;
        }
      }, 5000);

Y el de los estilos es este:

    #pag-index {
    background-image: url(assets/img/fondo.jpg);
    background-size: cover;
    background-attachment: fixed;
    transition: background 1.5s linear;
    -moz-transition: background 1.5s linear;
    -o-transition: background 1.5s linear;
    -webkit-transition: background 1.5s linear;
    }

Sé que en el Script lo único que hago es almacenar las rutas en variables, eso no hace la precarga, lo que me gustaría es que se precargaran de alguna forma para luego poder usarlas en el script de cambio de fondo.

2 respuestas 2

4

Puedes precargarlas usando AJAX, de ese modo cuando la quieras añadir ya estará en caché. Este código es totalmente agnostico y puede funcionarte tanto con puro JS como en Angular:

//Código de precarga
let images = [
  'https://via.placeholder.com/600/0000FF/808080 ?Text=N1',
  'https://via.placeholder.com/600/FF0000/FFFFFF?Text=N2',
  'https://via.placeholder.com/600/FFFF00/000000?Text=N3',
  'https://via.placeholder.com/600/000000/FFFFFF/?text=N4'
]

function preload(resources) {
  resources.forEach(url => fetch(url,{mode:'no-cors'}).then(()=> console.log('imagen', url,'cargada')));
}
preload(images);

//Código para demostrarlo, si estás usando Angular deberías trabajar con componentes
let index = 0;
setInterval(() => {
  document.getElementById("pag-index").style.backgroundImage = `url('${images[index]}')`;
  index = (index + 1) % images.length;
}, 2000);
#pag-index {
  height: 400px;
  width: 600px;
}
<div id="pag-index">
</div>

Un ejemplo con un componente de Angular lo puedes ver aquí:

https://stackblitz.com/edit/pawer13-background-cached?file=src/app/app.component.ts

4
  • No termina de funcional, el resultado es el mismo. Se ve un fondo blanco entre cada iteración de las imágenes. Una vez que se empiezar a repetir ya no sale por que están en la memoria. Cuando hago click con el botón derecho e inspeccionar, me meto en el apartado de Network y se ve que las imágenes se han cargado con Ajax, pero no son las que usa, por lo que se vuelven a cargar.
    – Victor
    Commented el 14 ago. 2020 a las 14:13
  • Un detalle: cuando abres las herramientas de desarrollo, los navegadores suelen desactivar la caché precisamente para que cualquier cambio se cargue al instante. Intenta comprobar cómo funciona con la herramienta cerrada Commented el 14 ago. 2020 a las 14:14
  • Por otro lado, he tenido que añadir opciones a fetch porque estoy usando imágenes de otro dominio, eso puede que estuviera influyendo. Commented el 14 ago. 2020 a las 14:20
  • 1
    Quería darte las gracias por tu ayuda, a pesar de que he probado a hacerlo como me has sugerido, he probado una variante de algo que probé ya y me funciona bien. De todas formas como suelo decir en estos casos, no es algo que vaya a ignorar, puesto que lo tendré en cuenta por si en un futuro me surge un problema similar y necesito usar esta idea. Gracias por responder y un saludo!
    – Victor
    Commented el 14 ago. 2020 a las 14:42
1

Al final probé una variante de una posible solución que estuve probando hace unas horas. El código viene a ser el siguiente:

    var objFoto = "../../../assets/img/fondo.jpg";
    var objFoto1 = "../../../assets/img/fondo1.jpg";
    var objFoto2 = "../../../assets/img/fondo2.jpg";
    var objFoto3 = "../../../assets/img/fondo3.jpg";
    var objFoto4 = "../../../assets/img/fondo4.jpg";
    var rutasImagenes = [objFoto, objFoto1, objFoto2, objFoto3, objFoto4];
    var numImagen = 1;

    var images = new Array();

    precarga(
      rutasImagenes,
    );

    function precarga(array) {
      for (var i = 0; i < array.length; i++) {
        images[i] = new Image();
        images[i].src = array[i];
      }
    }
   
    setInterval(function () {
      var imgActual = rutasImagenes[numImagen];
      var dir = imgActual;
      document.getElementById("pag-index").style.backgroundImage = "url(" + dir + ")";

      if (numImagen + 1 == rutasImagenes.length) {
        numImagen = 0;
      } else {
        numImagen++;
      }
    }, 7000);

Lo que intentaba conseguir con esto es la creación de un objeto de tipo imagen, lo que no se el motivo por el que antes no me funcionó. Pero esto me lo soluciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.