window.onresize：在調整過程中和調整大小完成時觸發函數

我是JavaScript新手。我想知道如何在用戶完成調整窗口大小後創建一個onresize函數以在另一個函數中觸發一個函數。會話超時很可能會發生。window.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的可見性將變成待機屏幕，說「請等待我們處理信息」。

腳本經驗：

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>

來源

2011-08-02 user763349

對於調整大小結束處理程序，請考慮此插件：http://benalman.com/projects/jquery-throttle-debounce-plugin/ –

在jQuer Ÿ網站上有調整大小事件評論：

根據實施情況，調整活動可以連續的大小調整過程中（在Internet Explorer中的典型行爲和基於WebKit的瀏覽器如Safari和Chrome）被髮送，或者在調整大小操作結束時（一些其他瀏覽器（如Opera）中的典型行爲）。

來源

2011-08-02 18:09:31 VIK

請提供並舉例說明這是如何完成的。 – user763349

@ user763349：嘗試下面的代碼。在IE和Chrome中，符號將逐個顯示，而您將移動窗口的邊框，但在Opera中，只有當您停止調整大小時，所有幾個符號纔會顯示。 ' <腳本類型= 「文本/ JavaScript的」> window.onresize =函數（）{ 的document.getElementById（ '場'）。值+ = 「A」 } A ' – VIK

我最終在傳統的JavaScript方法中使用jQuery。 – user763349

你不會得到該事件而調整正在發生火災，因爲事件不火，直到調整發生之後。

MDN Reference:

**NOTE:**

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

來源

2011-08-02 18:00:48 Lance

這不完全正確。大多數瀏覽器會在定期調整大小（包括Firefox）時觸發它。我剛剛檢查過，並且有幾個JS應用程序在調整大小期間接收事件。 – OverZealous

我喜歡看你的例子。我剛剛在webkit和firefox中嘗試過它，當然，直到調整大小後纔會觸發。 http://jsfiddle.net/Dr7dh/ – Lance

這可能是jsfiddle，它打破了它：http://pastehtml.com/view/b2ja2yrd4.html – OverZealous

這應做到：

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-02 18:00:56 OverZealous

這只是延遲發射事件，直到事件發射後的250ms。這與調整大小後發生的事件並不相同。 – Lance

你可以在網頁瀏覽器中做的最好的事情就是關閉。看我的例子。 – OverZealous

window.onresize：在調整過程中和調整大小完成時觸發函數

回答

相關問題