html - tag - ¿Es posible volver a calcular la imagen `srcset` utilizada si la ventana del navegador cambia de tamaño?
w3schools html5 picture (2)
Es posible obtener srcset para volver a calcular el tamaño de la ventana del navegador una vez que la página se haya cargado, y así actualizar la imagen que está usando.
La razón por la que desea hacer esto es porque si en un escritorio tiene la ventana de su navegador comprimida, carga un sitio, luego amplía la ventana del navegador, simplemente escalará el "small.jpg" (como se establece en el srcset ) por lo que el usuario terminará con una imagen pixelada.
Empecé a hacer un jsfiddle para mostrar el problema, pero no funcionó bien, ya que creo que srcset se calcula mediante la ventana del navegador, en lugar de la cuadrícula de resultados de jsfiddle.
Si está interesado, puede copiar y pegar debajo de esto en un archivo html en blanco y ejecutarlo en un servidor local (debe estar en un servidor http: // local para que pueda ver la pestaña de depuración de red para ver qué imagen ha cargado el navegador) . Ejecutarlo en el navegador a través de la URL del archivo utilizando el file:/// no le permitirá ver qué imagen se carga a través de la pestaña de depuración de la red.
<body>
<div class="wrapper">
<img
src="http://i.imgur.com/DoWeH0X.jpg?1"
srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w"
alt="#"
>
</body>
</html>
Puedes usar
var img = document.getElementById(''resizeMe'');
window.onresize = function() {
img.outerHTML = img.outerHTML;
}
Lo que hará que el HTML se envíe de nuevo a través del analizador, haciendo que el navegador vuelva a cargar la imagen de acuerdo con srcset.
Por supuesto, debería incluir alguna lógica para detectar si el tamaño de la pantalla ha cambiado a un tamaño fuera del rango actual, por lo que la imagen no se vuelve a cargar cada vez que el usuario cambia el tamaño de la ventana ligeramente.
O bien, podría clonar el nodo, insertarlo antes del nodo actual y luego eliminar el nodo anterior.
var img = document.getElementById(''resizeMe'');
window.onresize = function() {
var clone = img.cloneNode(true);
img.parentNode.insertBefore(clone, img);
img.remove();
}
Lo cual también hará que el análisis re-renderice el html, pero consumirá más recursos.
encontré esto para forzar un nuevo render
var img = document.getElementById (''mi-elemento''); img.src = img.src;