Объединение onload и onresize (jQuery)

Я хочу вызвать функцию как при загрузке, так и при изменении размера.

Есть ли лучший способ переписать это более компактно?

$('.content .right').width($(window).width() - (480));
$(window).resize(function(e) {
    $('.content .right').width($(window).width() - (480));
});

Ответы

Ответ 1

Вы можете привязываться к событию resize самостоятельно и автоматически запускать это событие при загрузке:

// Bind to the resize event of the window object
$(window).on("resize", function () {
    // Set .right width to the window width minus 480 pixels
    $(".content .right").width( $(this).width() - 480 );
// Invoke the resize event immediately
}).resize();

Последний вызов .resize() будет запускать этот код при загрузке.

Ответ 2

Я думаю, что лучшим решением является просто привязать его к событию загрузки:

$(window).on('load resize', function () {
    $('.content .right').width( $(this).width() - 480 );
});

Ответ 3

Хорошо заметить повторяющуюся логику и разбить ее на функцию:

function sizing() {
  $('.content .right').width($(window).width() - 480);
}

$(document).ready(sizing);
$(window).resize(sizing);

Ответ 4

Я собираюсь объединить лучшие части двух других ответов. Во-первых, переместите повторяющийся код в функцию. Во-вторых, не загрязняйте глобальное пространство имен.

$(document).ready(function() {
  var adjust_size = function() {
    $('.content .right').width($(window).width() - 480);
  };
  adjust_size();
  $(window).resize(adjust_size);
});

Я назвал функцию adjust_size, потому что предпочитаю глаголы для ориентированных на действия функций.

Ответ 5

Простой способ:

html:
<body onload="$(window).resize()"> 

javascript:
$(window).resize(function () { 
...
});