Одна из часто используемых юзерами возможностей — изменение размера окна браузера. При этом не все элементы на странице удается удачно масштабировать с помощью HTML/CSS и что-то приходится делать скриптами.
Для этого у объекта window существует событие resize, навесив на которое обработчик, можно динамически откликаться на действия пользователей. И всё было бы замечательно, если не осел поведение браузера Internet Explorer.
Дело в том, что когда вы хватаетесь за границу браузера и изменяете размеры окна, в большинстве браузеров событие resize возникает только по фактическому завершению ресайза. То есть пока вы тащите край страницы, ничего не происходит. ИМХО, правильнее, конечно, такое поведение привязать к событию resizeend, но мы имеем то что имеем.
IE напротив реагирует на ресайз сразу же во время перемещения, непрерывно вызывая функцию обработчик. Можно легко убедится в этом, запустив такой простой пример:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
window.onresize = function() {
document.body.innerHTML = Math.random();
}
</script>
</head>
<body></body>
</html>
Практика написания различных JavaScript-сценариев показывает, что поведение, выбранное стандартными браузерами, хоть и не отвечает названию события resize, является более удобным. Например, если обработчик вызывает ресурсоемкий скрипт, в корне перестраивающий страницу, то простой ресайз в ИЕ вызовет его пару десятков раз, и всё благополучно зависнет на пару минут. Чтобы привести поведение при ресайзе в IE к стандартной схеме, можно сделать "ход конем" с помощью таймеров. Предлагается такое решение:
var resizeInterval = 100;
window.onresize = function() {
if (resizeTimer != null) {
clearTimeout(resizeTimer);
resizeTimer = null;
}
resizeTimer = setTimeout("resizeHandler()", resizeInterval);
}
function resizeHandler() {
document.body.innerHTML = Math.random();
}
Изменяя значение переменной resizeInterval, можно добится наиболее удобного поведения при ресайзе. Кстати, вместо window.onresize лучше использовать функцию добавления обработчиков событий.
