3

Digamos que tengo un elemento div vacío con id="icon":

<div id="icon"></div>

Y con CSS le añado tamaño e imagen de fondo:

#icon {
    width: 80px;
    height: 80px;
    background-color: #808080;
    background-image: url("https://png.pngtree.com/png-clipart/20190617/original/pngtree-menu-vector-icon-png-image_3876237.jpg");
}

Y le pongo el src de otra imagen por si el primero ya no funciona:

#icon {
    width: 80px;
    height: 80px;
    background-color: #808080;
    background-image: url("https://png.pngtree.com/png-clipart/20190617/original/pngtree-menu-vector-icon-png-image_3876237.jpg"),
    /* SRC extra */
    url("https://tmnwtools-1634481568309.web.app/icons/menu.webp");
}

Pero cuando veo la página, ambas imágenes se cargan una sobre la otra y se solapan en vez de usar una y usar la otra cuando la primera ya no funcione, y tengo mi página implementada así, causando un enorme consumo de datos. Algo similar me pasa con las fuentes:

@font-face {
    font-family: Acherus;
    src: url("https://tmnwtools-1634481568309.web.app/fonts/acherus.woff") format("woff"),
        url("tmnwtools-1634481568309.web.app/fonts/acherus.ttf") format("truetype"),
        url("assets/fonts/acherus.woff") format("woff"),
        url("assets/fonts/acherus.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Se solapan una con la otra en vez de usar una cuando la otra no está disponible.

¿Alguien sabe de alguna manera de poner un "src alternativo" en CSS? Gracias y espero que me puedas ayudar.

2
  • Claro, es el comportamiento esperado, no hay un mecanismo de fallback asociado, simplemente cargará todos los recursos que pases en las url. el 26 dic. 2021 a las 15:59
  • Lo del "src alternativo" es solo para las fuentes, no para las imagenes de fondo, pues se muestran todas siempre (entiendo que lo hacen para superponer imagenes con fondos transparentes y darles algun tipo de efecto). En cambio, en las fuentes si que son fuentes alternativas, pero tengo mis dudas si realmente se cargan todas a la vez o solo cuando no se encuentra la primera va a por la segunda, etc. Eso mirando la consola con el inspector de tu navegador lo puedes descubrir por ti mismo supongo.
    – masterguru
    el 26 dic. 2021 a las 19:51

1 respuesta 1

0

Felices fiestas !

Con respecto a la carga de imágen de respaldo, hay una solución muy simple en HTML que es muy eficiente: el atributo onerror="" en la etiqueta img. Éste evento de JavaScript se ejecuta cuando surge un problema en la carga de imágenes, documentos o multimedias:

<img src="miIMG.jpg" onerror="URLimagen"/>
  

Cuando src="" no se carga, entonces onerror="" sí carga.

Éste ejemplo sería lo más fácil:

 
<h1>Imágen externo</h1>
<img src="miIMG.jpg" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';" style="width:100%">
  
  

3
  • Aunque el uso del atributo onerror es correcto el OP se refiere a la carga de imagenes desde css, no desde html o js, en css no existe forma de verificar si una imagen cargo o no el 27 dic. 2021 a las 1:07
  • Por eso compartí una solución mediante HTML y JavaScript el 27 dic. 2021 a las 1:09
  • El problema es que por cuestiones de seguridad no puedo usar JavaScript inline (onclick, onerror, onload, etc.), ya que mi página está protegida por Content-Security-Policy. el 27 dic. 2021 a las 4: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.