All geek questions in one place

Why does IE8 freeze on jQuery window.resize event?

I found a problem that seems to always play when opening a html and javascript snippet in IE8.

<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>

Downloading this file in IE8 and opening the developer tools will show that the log message is printed continuously after a single resizing of the browser window.

Does anyone have an idea why? This does not happen in IE7 or IE9, as well as in other browsers (or at least in their latest versions).

UPDATE

One solution to prevent the resize () trigger from being continuous is to add a handler to document.body.onresize if the browser is IE8.

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

But this does not answer my question: is continuous shooting resize () a bug in IE8?

+6
source share
2 answers

If the "show window contents when dragging and dropping" option is enabled, you will be inundated with resize events. I think you are testing IE8 on a separate Windows machine that activates this effect (Screen Properties → Appearance → Effects ...).

To counteract this, you can wrap and catch resize events to tame them: http://paulirish.com/demo/resize

This article says Chrome, Safari, and Opera also suffer from this.

+3
source

I see only the problem you are describing if the element on the page is modified ( as described in this question ). Your example does not work for me, but I assume that it adds a console message to the div log that you have, which means that it resizes the div and triggers a window resize event.

The answer Lee gave is correct, but the method in the link does not work for me. Here is what I did:

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

Thus, the handler is disabled as soon as it starts, and only re-bound after you have completed all your actions that can reactivate page resizing. I threw setTimeout to provide additional throttling. Increase the value if your scripts require more time.

0
source

Source: https://habr.com/ru/post/887696/

More articles:


All Articles