window.onresize: запуск функции во время и после изменения размера - PullRequest
Новая
       18

window.onresize: запуск функции во время и после изменения размера

0 голосов
/ 02 августа 2011

Я новичок в JavaScript. Я пытаюсь выяснить, как бы я создал функцию onresize для запуска функции во время и еще одну после того, как пользователь завершил изменение размера окна. Скорее всего, истечет время ожидания сеанса.

Есть идеи по написанию основной функции? 

<script type="text/javascript">
    window.onresize = function () {
    // The first function goes here while resizing is happening
    // Then function 2 occurs when window resizing is finished by the user
    }    
</script>

Вот модифицированная версия того, что я пытаюсь сделать. Цель состоит в том, чтобы скрыть основной капсульный div на странице во время изменения размера страницы. Первоначально, когда инициируется событие onresize, включается видимость div для отображения в режиме ожидания со словами «пожалуйста, подождите, пока мы обработаем информацию».

Сценарий Exp: 

var resizeTimeout;
window.onresize = function() {
        clearTimeout(resizeTimeout);
         document.getElementById("loading").className = "loading-visible";
         document.getElementById('XXXDIV').style.visibility = 'hidden';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('DesignXXX' + h ).style.visibility = 'hidden';
                 }
    resizeTimeout = setTimeout(function() {
            var hideDiv = function(){document.getElementById("loading").className = "loading-invisible";};
            var oldLoad = window.onload;
            var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
            location.reload(true) = newLoad;
            document.getElementById('XXXDIV').style.visibility = 'visible';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('DesignXXX' + h ).style.visibility = 'visible';
                 }
    }, 2000); // set for 1/4 second.  May need to be adjusted.
};

</script>

Ответы [ 3 ]

4 голосов
/ 02 августа 2011

Это должно сделать это: 

var resizeTimeout;
window.onresize = function() {
        clearTimeout(resizeTimeout);
        // handle normal resize
        resizeTimeout = setTimeout(function() {
            // handle after finished resize
        }, 250); // set for 1/4 second.  May need to be adjusted.
    };

Вот рабочий пример для сомневающихся: http://pastehtml.com/view/b2jabrz48.html

1 голос
/ 02 августа 2011

На сайте jQuery есть комментарий для изменения размера события:

В зависимости от реализации события изменения размера могут отправляться непрерывно во время изменения размера (типичное поведение в браузерах на основе Internet Explorer и WebKit, таких как Safari и Chrome) или только один раз в конце операции изменения размера типичное поведение в некоторых других браузерах, таких как Opera).

0 голосов
/ 02 августа 2011

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

MDN Ссылка:

**NOTE:**

The resize event is fired after the window has been resized.

...