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
:
Ver originaldocument.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.
