Событие изменения размера jQuery не запускается - PullRequest
Новая
       17

Событие изменения размера jQuery не запускается

13 голосов
/ 16 апреля 2011

По какой-либо причине следующее: 

$(function() {
  $(window).resize(function() {
    alert("resized!");
  });
});

запускает событие только при загрузке страницы. Изменение размера окна браузера ничего не делает в Safari и Firefox. Я не пробовал его в других браузерах.

Любые идеи или обходной путь?

Ответы [ 6 ]

11 голосов
/ 16 апреля 2011

Лучше всего избегать присоединения к событиям, которые могут потенциально генерировать много триггеров, таких как изменение размера окна и прокрутка тела, лучший подход, при котором флудинг из этих событий состоит в том, чтобы использовать таймер и проверить, произошло ли событие, затем выполнить правильное действие, примерно так: 

$(function() {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

    setInterval(function () {
        if ((width != $window.width()) || (height != $window.height())) {
            width = $window.width();
            height = $window.height();

            alert("resized!");
        }
    }, 300);
});

еще одним преимуществом использования таймера является то, что у вас есть полный контроль над тем, как часто проверять, что дает вам гибкость, если вам нужно рассмотреть какие-либо дополнительные функции на странице

10 голосов
/ 16 апреля 2011

Я думаю, ваше оповещение вызывает проблему, попробуйте вместо этого 

 $(window).resize(function() {
   $('body').prepend('<div>' + $(window).width() + '</div>');
 });

jsfiddle

3 голосов
/ 16 апреля 2011

работает в любом браузере:

http://jsbin.com/uyovu3/edit#preview

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});
1 голос
/ 23 декабря 2016

5 лет спустя ...

Единственный браузер, с которым у меня есть эта проблема, это Chrome; У меня нет Сафари.

Шаблон, который я заметил, заключается в том, что он работает, когда я встроенный код: 

<script type="text/javascript">
    $(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>

но не , когда я помещаю его в отдельный файл Javascript, с которым я загружаю: 

<script type="text/javascript" src="/js/resized.js"></script>

где скрипт содержит 

console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });

Я могу только догадываться, что это какая-то «защита», встроенная командой разработчиков Chrome, но она глупая и раздражающая. По крайней мере, они могли бы позволить мне обойти это, используя «ту же политику домена».

Обновление Некоторое время я думал, что использование $(document).ready() исправило это, но, видимо, я ошибался.

0 голосов
/ 04 декабря 2013

У меня была такая же проблема, я видел все виды решений и не работал.

Выполняя некоторые тесты, я заметил, что $ (window) .resize, по крайней мере, в моем случае, будет запускаться только с $ (document) .ready () перед ним. Не $ (функция ()); ни $ (окно) .ready ();

Итак, мой код сейчас: 

$(document).ready(function(){
  $(window).resize(function(){
      // refresh variables
      // Apply variables again
  });
});

... и даже предупреждение срабатывает!

0 голосов
/ 16 апреля 2011

попробуй 

$(document).resize(function(){ ... };);

Я думаю, это документ, который последовательно изменяет размеры в разных браузерах. Но сейчас я не на работе, чтобы проверить, что я обычно делаю.

...