JQuery: Erkennung einer Browser -Größenänderung

StackOverflow https://stackoverflow.com/questions/2031872

  •  19-09-2019
  •  | 
  •  

Frage

Ich verwende dieses Skript von Snipplr.

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>
War es hilfreich?

Lösung

Das Skript, das Sie gefunden haben, haben das Problem überkompliziert. Das Folgende funktionierte für mich:

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

Eine Warnung ist, dass das Ereignis der Größe bei der Größe des Browsers viel aufgerufen wird. Es wird nicht nur angerufen, nachdem der Browser die Größe geändert wurde. Infolgedessen könnten Sie die Rückruffunktion Hunderte Male bezeichnen - dies ist im Allgemeinen eine schlechte Idee.

Die Lösung wäre, das Ereignis zu drosseln oder zu entlarven. Drosseln bedeutet, dass Sie den Rückruf nicht mehr als x -mal in einer Zeitspanne abgefeuert werden (vielleicht 5 -mal pro Sekunde). Debouncing bedeutet, dass Sie den Rückruf nach einer bestimmten Zeitspanne aus dem letzten Größenvergleich abgefeuert haben (warten Sie bis 500 Millisekunden nach einem Ereignis der Größenänderung).

JQuery unterstützt derzeit keine Drossel- oder Entfernungsoption, obwohl es Plugins gibt. Andere beliebte Bibliotheken, die Sie möglicherweise verwendet haben, haben diese Funktionen, wie Unterstrich:

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    // Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});

Andere Tipps

Ich habe gerade das HTML -Ereignis mit dem Titel "Onresize" gesehen, das besonders tag gehört.

<body onresize="functionhere()">

Ich hoffe es wird euch helfen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top