Hola.
Tengo una imagen de presentación de gran tamaño en la portada de mi sitio y quiero cambiarla en función de la resolución de la pantalla.
Conozco la problemática de la responsividad de imágenes, y no voy a discutirla. He decidido que la imagen sea otra distinta a medida que el tamaño del screen baja.
Utilizo Jquery para identificar el width, y luego:
Código:
document.getElementById("laid").src="archivos/imagen2.png"
Etc.
El problema me resulta cuando veo (soy nuevo) que tienes que poner el código abajo en la página, porque si lo pones primero, no me funciona. Tengo que colocarlo bajo la imagen en sí para que la cambie al llegar el momento.
Incluso probando sólo con el código de arriba, es lo mismo; sólo funciona si está bajo la imagen en el html.
Pero esto no me sirve ni sirve para nada en realidad, porque la imagen que hay que cambiar ya se ha cargado y se trata de que no se cargue para optimizar la página en función del width. Es decir, que se cargue la imagen2.png en lugar de imagen.png para los que accedan desde el dispositivo correspondiente.
No voy a explicar más porque sé que me entendéis.
¿Hay solución a esto? ¿Estoy haciendo algo mal?
Gracias.