jQuery: обнаружение изменения размера браузера

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

  •  19-09-2019
  •  | 
  •  

Вопрос

Я использую этот скрипт от Snipplr, как бы я его установил, чтобы контейнерный Div на 100 % меньше, чем высота Newwindowheight, например -100 или что -то в этом роде.

<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>
Это было полезно?

Решение

Сценарий, который вы нашли, чрезмерно соответствует проблеме. Следующее сработало для меня:

$(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);

});

Одним из предупреждений является то, что событие Resisize часто называется при изменении размера браузера; Это не просто вызвано после того, как браузер был изменен. В результате вы могли бы использовать функцию обратного вызова сотни раз - как правило, это плохая идея.

Решением было бы, чтобы дроссель или отклонение события. Дросселирование означает, что вы не позволите обратном обратном вызове более чем x раз за некоторое время (возможно, в 5 раз в секунду). Дебель означает, что вы стреляете в обратный вызов после определенного периода времени с последнего события Resize (подождите до 500 миллисекунд после события Resisize).

JQuery в настоящее время не поддерживает опцию дроссельной заслонки или дебюра, хотя есть плагины. Другие популярные библиотеки, которые вы, возможно, использовали, например, подчеркивание:

$(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);

});

Другие советы

Я только что видел событие HTML под названием «OnResize», которое принадлежит особенно отметить, что он будет иметь больше производительности, чем обнаружение Java с этим использованием, я думаю.

<body onresize="functionhere()">

Я надеюсь, что это поможет вам, ребята ..

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top