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.
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 conimg.src = '';
). Por otro lado el rel="preload" en un elementolink
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.<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.