Estoy trabajando en un front-end de aplicaciones con HTML, CSS y JavaScript, todo está bien, pero antes de que la imagen se cargue en el encabezado, el icono de imagen rota aparece primero.

broken image

Quiero agregar un color de fondo en lugar de una imagen rota hasta que la imagen original esté completamente cargada.

2
Ummair Gillani 5 mar. 2018 a las 08:49

4 respuestas

La mejor respuesta

Muestra <img> después de que el contenido se haya cargado completamente.

<img style='display: none' onload="this.style.display = 'block'" src="...">

Si estás usando jQuery

<img style='display: none' id="myImg" onload="$(myImg).show()" src="...">
3
Roshana Pitigala 6 mar. 2018 a las 11:10

1) con css la solución es alt = "".

2) con la ayuda de Java Script

Coloque este código en la etiqueta de imagen

Cuando antes de que la imagen esté completamente cargada, esto superará el error colocando la imagen en segundo plano

0
Ummair Gillani 6 mar. 2018 a las 10:11

Otro método: use el marcador de posición img svg en línea, use ajax para solicitar un img real y luego repare el marcador de posición.

Img en línea

<img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
1
Jacob 6 mar. 2018 a las 11:18

Si la imagen no se carga cuando la página se muestra inicialmente, la etiqueta img mostrará el icono. Si está utilizando cualquier JS, esto es lo que puede hacer.

  1. Ponga la etiqueta de la imagen en una condición y muéstrela solo cuando la imagen se cargue en segundo plano (llamadas asíncronas). 2 hasta que la imagen no se cargue, oculte la etiqueta de la imagen y use una etiqueta o cualquier otra etiqueta con el color de fondo.
1
Saif Kamaal 5 mar. 2018 a las 05:53