jQuery: обнаружение изменения размера браузера
-
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()">
Я надеюсь, что это поможет вам, ребята ..