2011-05-10 11 views
6

Descubrí un problema que parece reproducirse siempre al abrir un fragmento de html y javascript en IE8.¿Por qué IE8 se cuelga en jquery window.resize event?

<html> 
    <body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $(window).resize(function() { 
       console.log('Handler for .resize() called'); 
      }); 
     }); 
    </script> 
    <div id="log"> 
    </div> 
    </body> 
</html> 

Cargando este archivo en IE8 y Herramientas de Desarrollo apertura mostrará que el mensaje de registro se imprime de forma continua después de un cambio de tamaño de la ventana del navegador.

¿Alguien tiene una idea de por qué? Esto no está sucediendo en IE7 o IE9, ni en otros navegadores (o al menos en sus últimas versiones).

ACTUALIZACIÓN

Una solución para evitar el gatillo continua de cambio de tamaño() es agregar el controlador de document.body.onresize si el navegador es Internet Explorer 8.

var ieVersion = getInternetExplorerVersion(); 
    if (ieVersion == 8) { 
     document.body.onresize = function() { 
     }; 
    } 
    else { 
     $(window).resize(function() { 
     }); 
    } 

Pero esto no responde a mi pregunta: ¿es el disparo continuo de resize() un error en IE8?

+0

No se pudo reproducir este problema en IE8 con este fiddel: http://jsfiddle.net/hrtp8/ – DanielB

Respuesta

3

Si está activada la opción "mostrar el contenido de la ventana mientras se arrastra", se verán inundados de eventos de cambio de tamaño. Supongo que está probando IE8 en una máquina Windows separada que tiene este efecto habilitado (Propiedades de Pantalla -> Apariencia -> Efectos ...).

Para contrarrestar esto, se puede envolver & atrapar a los eventos de cambio de tamaño para domesticarlos: http://paulirish.com/demo/resize

En este artículo se dice Chrome, Safari & Opera sufren de esto también.

0

Solo veo el problema que está describiendo si se cambia el tamaño de un elemento de la página (as described in this question). Su ejemplo no funciona para mí, pero asumo que está agregando el mensaje de consola en el log div que tiene allí, lo que significa que está redimensionando el div y activando el evento de cambio de tamaño de la ventana.

La respuesta que dio Lee es correcta, pero el método en el enlace no funcionó para mí. Esto es lo que hice:

var handleResize = function(){ 
    $(window).one("resize", function() { 
     console.log('Handler for .resize() called'); 
     setTimeout("handleResize()",100); 
    }); 
} 
handleResize(); 

De esta manera, el controlador no está consolidado en cuanto se dispara, y sólo se re-ligado después de haber terminado todas las acciones que puedan volver a activar un cambio de tamaño página. Lancé un setTimeout para proporcionar un estrangulamiento adicional. Aumenta el valor en caso de que tus scripts necesiten más tiempo.