0

Tengo varias imágenes en la página web. Lo que necesito es que al cargar la página se carguen todas las imágenes iguales (por ejemplo, el dibujo de un reloj. Esto lo hago para que cargue más rápido la web) y que se "pre carguen" las imágenes correctas en caché. Cuando éstas imágenes correctas estén completamente "pre cargadas" en caché, que se sustituya la imagen temporal (la del reloj) por la correcta.

Lo he probado a hacer con css propiedad "background" pero no me funciona. No muestra la del reloj, muestra directamente la original/correcta.

En definitiva, al cargar la página que muestre una imagen y cuando esté precargada la correcta que se sustituya una por otra.

He probado tambien con onload pero nada, tampoco me funciona.

Saludos.

1 respuesta 1

2

Una forma sencilla, y sin necesidad de utilizar javascript, puede ser la de incluir la imagen temporal como background en base64 de forma que se muestre de manera inmediata y establecer las urls de las imágenes en los atributos src de éstas:

img{
  width: 200px;
  height: 200px;
  background: url(data:image/png;base64,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);
  
}
<img src="https://i.pinimg.com/736x/48/bd/3f/48bd3f6e928d7cb4b8d499cb0f96b8a8--despicable-minions-funny-minion.jpg">
<img src="https://images-na.ssl-images-amazon.com/images/G/01/aplusautomation/vendorimages/65fa961e-8f22-4fe6-a420-3c3c26dd2953.jpg._CB289161999__SL300__.jpg">
<img src="https://vignette2.wikia.nocookie.net/despicableme/images/2/2b/Stuart.png/revision/latest?cb=20161108162855">

3
  • Exacto ese es el efecto que busco. Si cojo el recurso/imagen de internet si que se ve el efecto pero si cojo la imagen del propio pc casi ni se identifica la imagen de fondo.
    – Marcos
    Commented el 19 sept. 2017 a las 10:55
  • Sí, claro. Entiendo que lo importante no es que se vea la imagen de cargando, salvo que la imagen definitiva tarde en cargar. Commented el 19 sept. 2017 a las 11:05
  • Ya está casi todo claro. El problema que tengo es por culpa del Bootsrtap.
    – Marcos
    Commented el 19 sept. 2017 a las 11:56

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.