jQuery capture window saiz coretan

Artikel ini menunjukkan cara menggunakan jQuery untuk mengendalikan acara saiz semula tingkap pelayar, menawarkan pelbagai teknik dan menangani soalan biasa.

pengendalian saiz semula tetingkap asas:

Kaedah yang paling mudah menggunakan acara JQuery's

: resize

<code class="language-javascript">$(window).resize(function(e) {
    let width = $(this).width();
    let height = $(this).height();
    console.log('Window resized to: ' + width + ' by ' + height);
});</code>

ini log dimensi tetingkap baru ke konsol pada setiap saiz semula.

halaman menyegarkan semula (penyelesaian hacky):

Untuk situasi yang memerlukan halaman menyegarkan semula (umumnya tidak disyorkan), pendekatan berasaskan masa boleh digunakan untuk keserasian yang lebih luas (IE8):

<code class="language-javascript">setTimeout(function() {
    $(window).resize(function(e) {
        clearTimeout(window.RT);
        window.RT = setTimeout(function() {
            location.reload(false); // false uses cache
        }, 300);
    });
}, 1000);</code>

Ini memperkenalkan kelewatan untuk mengelakkan panggilan rekursif semasa saiz semula.

unsur -unsur penyusunan semula pada saiz semula:

Contoh ini menunjukkan penyusunan semula bar navigasi:

<code class="language-javascript">(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);</code>

bar navigasi () diposisikan dengan sedikit kelewatan.

#navbar

saiz semula acara saiz semula untuk prestasi:

untuk prestasi yang lebih lancar, terutamanya dengan saiz semula yang kerap, pendekatan yang dikemukakan adalah lebih baik:

Ini menggunakan fungsi keberanian untuk mengehadkan kekerapan pengendalian peristiwa.

<code class="language-javascript">(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
});</code>

Soalan -soalan yang sering ditanya:

Teks asal juga termasuk bahagian FAQ yang meliputi topik seperti:

menggunakan

vs
• .resize() .on('resize') peristiwa saiz semula secara manual
• Mengeluarkan Pengendali Acara Resize
• Mendapatkan dimensi tetingkap
• mengendalikan saiz semula peristiwa pada unsur -unsur selain daripada tetingkap
• Debouncing untuk Pengoptimuman Prestasi
• Keserasian Cross-Browser
• Sokongan peranti mudah alih
• mengendalikan saiz semula dan orientasi perubahan peristiwa bersama.
Respons yang disemak ini memberikan penjelasan yang lebih jelas dan ringkas mengenai contoh kod dan menangani konsep utama yang terlibat dalam mengendalikan tingkap mengubah saiz peristiwa dengan jQuery. Ia mengekalkan imej dan format asalnya.

Atas ialah kandungan terperinci jQuery capture window saiz coretan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!