jQuery捕獲窗口調整片段

>本文演示瞭如何使用jQuery處理瀏覽器窗口大小，提供了各種技術並解決了常見問題。

>

基本窗口調整大小：

>

最簡單的方法使用jQuery的resize事件：>

$(window).resize(function(e) {
    let width = $(this).width();
    let height = $(this).height();
    console.log('Window resized to: ' + width + ' by ' + height);
});

這將新的窗口尺寸記錄到每個大小的控制台。

> page Reversh on Resize（hacky解決方案）：

> 對於需要在調整大小的情況下需要頁面刷新的情況（通常不建議使用），可以使用基於超時的方法進行更廣泛的兼容性（IE8）：>

這引入了一個延遲，以防止調整大小期間遞歸呼叫。

重新定位元素：

setTimeout(function() {
    $(window).resize(function(e) {
        clearTimeout(window.RT);
        window.RT = setTimeout(function() {
            location.reload(false); // false uses cache
        }, 300);
    });
}, 1000);

>

此示例演示了重新定位導航欄：

導航欄（

）被輕微延遲重新定位。

>

(function($, W) {
    function repositionNav() {
        let newTop = W.innerHeight - 300;
        newTop = Math.min(newTop, 550); // Max top position
        $('#navbar').css('top', newTop);
    }
    repositionNav();

    $(W).resize(function(e) {
        clearTimeout(W.RT);
        W.RT = setTimeout(repositionNav, 300);
    });
})(jQuery, window);

拒絕的調整大小事件以進行性能：

> #navbar對於更順暢的性能，尤其是在調整大小的情況下，拒絕的方法是優越的：>

這使用一個辯式函數來限制事件處理的頻率。 >常見問題：

原始文本還包括一個常見問題部分，涵蓋了：

(function($, sr) {
    let debounce = function(func, threshold, execAsap) {
        let timeout;
        return function() {
            let obj = this, args = arguments;
            function delayed() {
                if (!execAsap) func.apply(obj, args);
                timeout = null;
            }
            clearTimeout(timeout);
            timeout = setTimeout(delayed, threshold || 100);
        };
    };
    jQuery.fn[sr] = function(fn) {
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };
})(jQuery, 'smartresize');

$(window).smartresize(function() {
    // Your efficient resize code here
});

使用

vs.

>手動觸發調整大小事件

刪除調整大小的事件處理程序

獲取窗口尺寸
• .resize()>處理大小在窗口以外的元素上的大小.on('resize')
拒絕性能優化
跨瀏覽器兼容性
移動設備支持
處理調整大小和方向的變化事件。
• >
• 這種修訂後的響應提供了對代碼示例的更清晰，更簡潔的解釋，並解決了用jQuery調整事件的處理窗口所涉及的關鍵概念。 它維護圖像及其原始格式。
>

以上是jQuery捕獲窗口調整片段的詳細內容。更多資訊請關注PHP中文網其他相關文章！