Si trabajamos con diseños web responsive, muy probablemente hagas algún tipo de acción con JavaScript para detectar el evento resize. Este evento, como indica su nombre en inglés, indica que la web ha sufrido un cambio de tamaño. Si en lugar de trabajar con JavaScript directamente sois como yo, usuarios de jQuery el ejemplo típico sería el siguiente:
$(window).resize(function() {
alert("El tamanno ha cambiado!");
}); ¿Qué problema nos surgirá tras usar este código tal cual, dependiendo del navegador llegaremos a obtener respuestas diferentes. En Google Chrome he comprobado, por ejemplo, que en cada redimensionamiento en lugar de saltar un sólo evento se disparaban cuatro: uno con el tamaño antiguo, tres con el nuevo. En Firefox el comportamiento por lo visto también puede ser errático (o parecernos para nuestros propósitos).
La forma de solucionarla es la parte interesante de esta entrada, básicamente debemos basarnos en un temporizador, de forma que sólo se dispare una vez para nosotros el evento:
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
alert("El tamanno ha cambiado!");
} Si 500 milisegundos os parecen mucho porque queréis que el evento se desencadene antes, os aseguro que con valores de 100 sigue funcionando correctamente.
https://www.youtube.com/embed/z-xGk9c_eOw Guionista y locutor: Manuel Ignacio López Quintero.Fecha de publicación: 31 de diciembre de 2024.
Ver comentarios
¿Y no sería mejor guardarse las dimensiones de la pantalla y dejarse de temporizadores que no tienen porque funcionar siempre (que sucede si es un navegador no muy potente o si el PC está bastante saturado...)?
Por ejemplo:
var width;
var height;
$(window).resize(function() {
var newWidth = $(window).width();
var newHeight = $(window).height();
if( newWidth != width || newHeight != height ) {
width = newWidth;
height = newHeight;
doneResizing();
}
});
function doneResizing(){
alert("El tamanno ha cambiado!");
}
Solo para mencionar que con el comentario "dejarse de temporizadores que no tienen porque funcionar siempre" estas analizando incorrectamente el código o en su defecto desconciendo el como funciona el setTimeout(), en el caso de esta funcion solo se ejecuta "UNA SOLA VEZ" el código dentro de ella, asi que tu segundo comentario "(que sucede si es un navegador no muy potente o si el PC está bastante saturado...)?" queda descartado ya que independientemente de que se trate de un procesador muy potente o no, ó si este saturado o no, la funcion la puede ejecutar sin ningun problema un procesador intel core i7 ó el procesador de un equipo obsoleto 4.86.
si se dice que se hace en javascript, se hace en js, no en jquery.