Cambio de Imagen para responsividad

[JUMASOL]

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.

[dardosmania]

Buenas

Eso que comentas que solo funciona cuando lo pones debajo es debido a que esa linea se esta ejecutando antes de que el elemento html se haya creado entonces no encuentra ningun elemento con esa id.

Para resolverlo tienes la opcion javascript:

Código Javascript:

window.onload = function(){
//Aqui el codigo JavaScript
}
 

O la opcion JQuery

Código Javascript:

$(document).ready(function () {
//Aqui el codigo JavaScript
});
 

Ambas operaciones realizan la misma funcion, es lo que hace es ejecutar el codigo javascript una vez que se haya cargado todo el html asi evitas que te pase lo que sucede

[IsaBelM]

deberías de leer sobre la diferencia entre load y DOMContentLoaded

[JUMASOL]

Ya entiendo, y he leído las referencias de Mozilla.

Pero entonces no me sirve, porque de lo que se trata es de ahorrar carga al navegador haciendo que se cargue la imagen2 en lugar de la imagen que estaba por defecto. Pero si tiene que esperar a que se cargue y parsee todo el contenido, entonces ya se ha cargado.

Entonces habría que establecer una condición para cargar una u otra en función del width, pero no quitar una y poner otra a medida que el width.

¿Estoy en lo cierto?

Gracias.

[Alexis88]

¿Y si mejor utilizas media queries?

Código CSS:

@media all and (min-width: 800px){
    #myImg{
        content: url(imagenGrande.jpg);
    }
}
 
@media all and (min-width: 320px) and (max-width: 800px){
    #myImg{
        content: url(imagenMediana.jpg);
    }
}
 
@media all and (max-width: 320px){
    #myImg{
        content: url(imagenChica.jpg);
    }
}
 

[JUMASOL]

Esto ya lo conozco, ¿pero acaso el contenido incluido a través de la propiedad content es indexable?

No. Porque no forma parte del código en sí.

No me sirve. Además, las imágenes llevan alt y title.

Más aun, y aunque ello no venga al caso, tienen forma irregular y sobre ellas a un área para un enlace muy especial con forma irregular que coincida con la forma de la imagen.

No valen las media queries.

[Alexis88]

Para un caso como el que recién explicaste —y que creo que debiste mencionar desde un inicio para así recomendarte otra solución—, pues, solo te queda controlar el problema mediante una función que se ejecute antes de la carga de los subrecursos del DOM (audio, vídeo, imágenes, frames), pero luego de la carga del DOM.

Código Javascript:

document.addEventListener("readystatechange", function(){
    switch (this.readyState){
        case "loading":
            console.log("El documento está cargando");
            break;
        case "interactive":
            console.log("El DOM ha terminado de cargar, pero no los subrecursos");
            break;
        case "complete":
            console.log("El DOM y los subrecursos han terminado de cargar");
            break;
    }
}, false);
 

Desde que el documento empieza a cargar hasta que termina, se producen tres eventos cuya descripción puedes ver en los mensajes del ejemplo. Sabiendo esto, lo que podrías hacer es, leer las medidas del dispositivo (ancho y alto) y, según sea el caso, asignar la imagen respectiva, misma que cargará de forma asíncrona puesto que fue añadida luego del proceso de carga del DOM. Esto es algo similar al ejemplo de las media queries, pues también deberás leer las medidas del dispositivo para establecer una imagen en particular, solo que aquí también podrás definir los valores para las propiedades alt y title. Y estos mismos cambios deberás establecerlos en una función que se ejecute cuando se redimensione la ventana o cuando se cambie la orientación del dispositivo, para lo cual existen los eventos respectivos.

[siddartha23]

Mobile first. Carga por defecto la imagen mas ligera.

Y en desktop, que es donde tienes mas recursos, recién cargas tu script y reemplazas la imagen por una mas acorde al tamaño de la pantalla...

[JUMASOL]

He visto vuestras soluciones y las estoy poniendo en práctica.

Gracias.

[IsaBelM]

Iniciado por JUMASOL

Ya entiendo, y he leído las referencias de Mozilla.

Pero entonces no me sirve, porque de lo que se trata es de ahorrar carga al navegador haciendo que se cargue la imagen2 en lugar de la imagen que estaba por defecto. Pero si tiene que esperar a que se cargue y parsee todo el contenido, entonces ya se ha cargado.

Entonces habría que establecer una condición para cargar una u otra en función del width, pero no quitar una y poner otra a medida que el width.

¿Estoy en lo cierto?

Gracias.

en realidad no posteé para darte una opción, sino en respuesta a la sugerencia de dardosmania de usar el evento load. para que entiendas la diferencia entre ambos eventos, te dejo este ejemplo

<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<style>
div {
font-size: 2rem;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {

document.querySelector('div').textContent = 'se ha disparado DOMContentLoaded y la imagen no ha empezado a cargar';

}, false);


window.addEventListener('load', function() {

document.querySelector('div').textContent = 'se ha completado la carga de todos los elementos de la página';

}, false);

</script>
</head>
<body>
<div></div>
<img src="http://cdn2.wallpapersok.com/uploads/picture/449/111/111449/loshadi-beg-trava-oblaka-515.jpg?width=7510&height=5350&crop=true">

</body>
</html>

y para darte una opción al caso que ocupa - supeditada a la compatibilidad con los navegadores - tienes la etiqueta <picture> de html5