Skip to main content
2 de 2
AngularJS(Angular 1) y Angular(Angular 2+) son considerados frameworks distintos. Aquí se utiliza solo Angular por tanto lo correcto es poner solo esa etiqueta en la pregunta para evitar confusiones y que solo aparezca en las búsquedas de la etiqueta correspondiente.

¿Hacer precarga de imagenes en Angular?

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.

Victor
  • 546
  • 4
  • 13