JQuery Capture Fenster -Größen -Snippets

Dieser Artikel zeigt, wie Sie JQuery verwenden, um das Browser -Fenster zu verarbeiten, die Ereignisse der Größenänderung, verschiedene Techniken anbieten und häufige Fragen behandeln.

Grundleger die Größe der Größe der Größenänderung:

Die einfachste Methode verwendet Jquerys resize Ereignis:

<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>

Dies protokolliert die neuen Fensterabmessungen an der Konsole an jeder Größe.

Seite Aktualisieren Sie die Größe (Hacky -Lösung):

Für Situationen, in denen eine Seite aktualisiert werden muss, um die Größe zu ändern (im Allgemeinen nicht empfohlen), kann ein zeitübergreifender Ansatz zur breiteren Kompatibilität verwendet werden (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>

Dies führt zu einer Verzögerung, um rekursive Anrufe während der Größenänderung zu verhindern.

Repositionierung von Elementen in der Größe:

Dieses Beispiel zeigt die Neupositionierung einer Navigationsleiste:

<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>

Die Navigationsleiste (#navbar) wird mit einer leichten Verzögerung neu positioniert.

Ereignis für die Leistung für die Leistung für die Performance befreit:

Für eine reibungslosere Leistung, insbesondere bei der häufigsten Größe, ist ein beunruhigter Ansatz überlegen:

<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>

Hier

häufig gestellte Fragen:

Der Originaltext enthält auch einen FAQ -Abschnitt, der Themen abdeckt wie:

Verwenden Sie
• vs. .resize() .on('resize')
manuell ausgelöst die Größe der Größe Ereignisse
Entfernen von Event -Handlern der Größe des Größens
Fensterabmessungen erhalten
Umgang mit der Größe der Größe der Größe von Ereignissen auf anderen Elementen als dem Fenster
Entfaser für die Leistungsoptimierung
Cross-Browser-Kompatibilität
Support für Mobilgeräte
Handhabung der Größe und Orientierung ändern Ereignisse zusammen.

Diese überarbeitete Antwort liefert eine klarere, prägnantere Erklärung der Code -Beispiele und adressiert die Schlüsselkonzepte, die an der Handhabungsfenster -Größe mit JQuery -Ereignissen verbunden sind. Es behält das Bild und sein ursprüngliches Format bei.

Das obige ist der detaillierte Inhalt vonJQuery Capture Fenster -Größen -Snippets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!