He estado buscando diferentes respuestas sobre cómo verificar si se ha cargado una imagen de fondo, sin embargo, la mayoría de ellas son para si la imagen está configurada en el código html.
Tengo mi imagen como URL de fondo en un archivo css:
.container{ background-image: url(/images/rickandmorty.jpg) !important; background-repeat: no-repeat; background-size: cover; }En este momento, el texto se está cargando antes que la imagen. ¿Alguna forma de evitarlo usando javascript?
Gracias
No estoy seguro, pero puede intentar agregar un evento de carga en un objeto html como este:
<div class="container" onLoad="myFunction">...</div>Sé que esto no es lo que se preguntó, pero me gustaría abogar por el uso de imágenes en lugar de imágenes de fondo. Hace que la implementación sea mucho más flexible (animaciones, etc.), permite optimizar la resolución y el dispositivo (srcset), proporciona una mejor accesibilidad (etiquetas alt), facilita la escucha de eventos, etc.
Para hacer que las imágenes funcionen como fondo, solo necesita un envoltorio de imagen y un poco de css (ajuste de objeto: portada)
Aquí hay un pequeño ejemplo usando onload para activar la animación.
function onImageLoaded() { document.querySelector('header').classList.add('loaded') } function onImageError() { alert('I\'m starting to work up some anxiety about this whole thing!') } * { box-sizing: border-box; position: relative; } header { aspect-ratio: 21/9; display: flex; justify-content: center; align-items: center; font-size: 1rem; color: white; text-shadow: 0 0 .25em rgba(0, 0, 0, 0.4); background: #869F63; z-index: 0; overflow: hidden; } picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: -1; overflow: hidden; } picture img { display: block; width: 100%; height: 100%; object-fit: cover; } h1 { will-change: transform; transition: transform 2000ms; transform: translateY(50vh); opacity: 0; } img { will-change: transform; transition: transform 2000ms; transform: scale(2); opacity: 0; } .loaded h1, .loaded img { transform: none; opacity: 1 } <header> <picture> <img src="https://assets.codepen.io/68939/rickandmorty.png" width="680" height="380" alt="Rick & Morty...." onload="onImageLoaded()" onerror="onImageError()" /> </picture> <h1>Rick & Morty</h1> </header>