Может ли этот код jQuery быть реорганизован

Question

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

Не может быть реорганизован лучше или он хорош как есть.

$(window).load(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('display', 'block') 
    .css('height', height); 
}); 
$(window).resize(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('height', height); 
}); 

Answer 1

// Cache elements that get used more than once 
var $background = $('.skin-background'); 
var $displayArea = $('#display-area'); 

// Don't repeat yourself, put recurring actions in functions 
var resizeBackground = function() { 
    $background.css({ 
     'display': 'block', 
     'height': $displayArea.height() + 'px' 
    }); 
}; 

$(window).load(resizeBackground).resize(resizeBackground); 

Вы должны также рассмотреть на «throttle» обработчик событий для изменить размер события, потому что некоторые браузеры стреляют много из них при изменении размера окна. Используя underscore.js, это было тогда:

$(window).load(resizeBackground).resize(_.throttle(resizeBackground, 100)); 

Answer 2

$(window).on("load resize",function() { 
var height = $('#display-area').height(); 
$('.skin-background') 
    .css({'display':'block','height':height}); 
}); 

Answer 3

Вы можете использовать единственный селектор для добавления обоих событий и может установить несколько CSS атрибутов, как этот

$(window).load(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('display' : 'block','height', height); 

}).resize(function() { 
var height = $('#display-area').css('height'); 
$('.skin-background') 
    .css('height', height); 
});