2

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.

2
  • Para precarga de imágenes suele ser mejor crear un elemento imagen ( let img = new Image(); ) y asignarlo al destino al terminar la carga (img.onload ), en este caso el cancel y cierre de la conexión no es un estándar http sino mas bien una implementación de los navegadores ( limpiar el src con img.src = '';). Por otro lado el rel="preload" en un elemento link sólo tiene sentido para disparar un fetch de un recurso antes de que comience el render de la página, si estás esperando al DOM para crear el link se pierde esa ventaja y sería mas simple crear una imagen en memoria. Commented el 8 ene. 2019 a las 14:40
  • @aloMalbarez El código es bastante mas largo y complicado que lo ahí mostrado. Es un método de carga en varias fases, con toda la GUI en javascript (el <body> está vacío) usando las webix. No puedo meter elementos en el <body>, así que la mejor forma que he encontrado es la que muestro: usando un <style> a medio formar, y completarlo luego desde Javascript. El "preload" es solamente para evitar mostrar la imagen poco a poco si la red es muy lenta.
    – Trauma
    Commented el 8 ene. 2019 a las 14:53

1 respuesta 1

3

Al llamara a la función utils.background.cancel() estas eliminando la propiedad href haciendo así que se detenga la descarga de la imagen.

Para evitar la advertencia, en vez de eliminar la propiedad, has de quitar la url de la imagen.

Poner el href vacío también daría una advertencia por lo que puedes poner un href válido pero inútil como "#".

A background, añade la función clear que cambie el href:

clear: function( ) {
    if( utils.background.$link ) utils.background.$link.setAttribute( 'href', '#' );
} 
1
  • ¡ Eres una máquina ! xD
    – Trauma
    Commented el 8 ene. 2019 a las 14:33

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.