webew
Войти » Регистрация
 
JavaScript :: События

Об осле и ресайзе

30 июля 2008, 9:49

Одна из часто используемых юзерами возможностей — изменение размера окна браузера. При этом не все элементы на странице удается удачно масштабировать с помощью HTML/CSS и что-то приходится делать скриптами.

Для этого у объекта window существует событие resize, навесив на которое обработчик, можно динамически откликаться на действия пользователей. И всё было бы замечательно, если не осел поведение браузера Internet Explorer.

Дело в том, что когда вы хватаетесь за границу браузера и изменяете размеры окна, в большинстве браузеров событие resize возникает только по фактическому завершению ресайза. То есть пока вы тащите край страницы, ничего не происходит. ИМХО, правильнее, конечно, такое поведение привязать к событию resizeend, но мы имеем то что имеем.

IE напротив реагирует на ресайз сразу же во время перемещения, непрерывно вызывая функцию обработчик. Можно легко убедится в этом, запустив такой простой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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 resizeTimer = null;
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 лучше использовать функцию добавления обработчиков событий.


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

rgbeast

Firefox 1.5 в linux, генерирует события в обоих примерах примерно одинаково, если ресайзить медленно. Существует ли событие resizeend?
30.07.2008, 12:05
Ответить

bur

Так и должно быть.
Примеры необходимо тестить в паре [IE]--[еще какой-то браузер], тогда отличия будут очевидны.
30.07.2008, 12:08
Ответить
NO USERPIC

rgbeast

я так понял, что отличие IE в том, что он генерирует событие с большей частотой, чем другие браузеры
30.07.2008, 12:25
Ответить

bur

"С большей частотой", пожалуй, не совсем точная фраза.

В том же файрфоксе, к примеру, событие возникает только по окончанию ресайза окна, но не в процессе.
В отличие от него, ИЕ непереставая генерирует событие пока происходит ресайз. Частоту с которой это делает ИЕ можно увидеть, изменив в первом примере строку
document.body.innerHTML = Math.random();
на такую:
document.body.innerHTML += Math.random();
.
30.07.2008, 12:43
Ответить
NO USERPIC

rgbeast

События в firefox у меня возникают в процессе ресайза, если приостановить движение мыши. Ресайз не закончен, так как кнопка мыши не отпушена, однако при задержке мыши в одном месте, firefox генерирует событие.
30.07.2008, 12:55
Ответить

bur

Да, возникает с определенным таймаутом.
30.07.2008, 13:14
Ответить
NO USERPIC

necrosis

Safari (по крайней мере по win) точно также ведет себя при ресайзе - разница только в более "правильной" и производительной java-машине. Мне кажется, что положение нужно спасать версткой и css-хаками для осла: где-то видел совет про отрицательный margin для контейнера, который при ресайзе именно в осле становился почему-то на 1px больше чем должен был бы быть.
30.07.2008, 17:10
Ответить

bur

Не думаю, что CSS-хаки это более правильный подход, особенно, если учесть, что линейка браузеров ИЕ растет и хаки непрерывно обновляются и усложняются.
К сожалению, бывают случаи, когда верстка не спасает...
31.07.2008, 07:18
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: