Skip to main content
2 de 2
título editado
Trauma
  • 26.9k
  • 5
  • 42
  • 68

Eliminar advertencia "<link rel=preload> has an invalid `href` value"

Estoy cargando de forma dinámica una imagen para el fondo de pantalla, pero precargándola; con esto, busco mostrarla de una vez, y no poco a poco según se carga, aunque la velocidad de red sea lenta. Para ello, tengo el siguiente html:

<html>
  <head>
    <meta charset="utf-8"/>
    <style>
.background {
  /* background: url(images/bg.jpg) no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
    </style>
  </meta>
  <body class="background">
  </body>
</html>

Una vez cargado el documento y parseado el DOM, obtengo un archivo config.json en el que se me indica la imagen de fondo. Con esto, creo un <link rel="preload" ...> dinamicamente:

const utils = {
  background: {
    set: function( url ) {
      var ele;

      if( !utils.background.$link ) {
        ele = document.createElement( 'link' );
  
        ele.setAttribute( 'rel', 'preload' );
        ele.setAttribute( 'as', 'image' );
        ele.setAttribute( 'href', url );
        ele.onload = onImageLoaded;

        utils.background.$link = ele;

        document.getElementsByTagName( 'head' )[0].appendChild( ele );
      } else {
        ele = utils.background.$link;
        ele.onload = onImageLoaded;
        ele.setAttribute( 'href', url )
      }

      function onImageLoaded( ) {
        document.getElementsByClassName( 'background' )[0].style.backgroundImage = `url(${url})`;
      }
    },
    cancel: function( ) {
      if( utils.background.$link ) utils.background.$link.removeAttribute( 'href' );
    }
  }
}

Funciona correctamente; aún limitando la velocidad de red, la imagen se muestra toda de golpe. El problema es la función utils.background.cancel( ). Esta función se usa para eliminar la imagen. En este caso, la imagen solo se usa durante el proceso de login. Una vez el usuario hace el ingreso correctamente, la imagen ha de ocultarse. Pero, si se está cargando, quiero detener la carga.

Llamando a esta función, ciertamente, la carga se detiene; pero en la consola del navegador aparece la advertencia

<link rel=preload> has an invalid 'href' value

Entiendo que puede ser un exceso de celo del navegador, pero me parece ... poco profesional ir dejando avisos por ahí.

¿ Hay alguna otra forma de cancelar la carga de un elemento <link rel="preload" ...> sin eliminar su propiedad href ? O, en su defecto, sin que aparezca el mencionado aviso en la consola.

Nota: He intentado eliminar el atributo backgroundImage del body haciendo delete document.getElementsByClassName( 'background' )[0].style.backgroundImage;, pero esto no interrumpe la carga de la imagen.

Trauma
  • 26.9k
  • 5
  • 42
  • 68