0

私は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>
4

3 に答える 3

4

これはそれを行う必要があります：

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

于 2011-08-02T18:00:56.157 に答える
1

jQuery Webサイトには、イベントのサイズを変更するためのコメントがあります。

実装に応じて、サイズ変更イベントは、サイズ変更の進行中に継続的に送信することも（Internet ExplorerおよびSafariやChromeなどのWebKitベースのブラウザーでの一般的な動作）、サイズ変更操作の最後に1回だけ送信することもできます（ Operaなどの他のブラウザ）。

于 2011-08-02T18:09:31.060 に答える
0

サイズ変更が行われるまでイベントが発生しないため、サイズ変更中にそのイベントが発生することはありません。

MDN リファレンス:

**NOTE:**

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

于 2011-08-02T18:00:48.197 に答える