web-dev-qa-db-ja.com

onloadとonresizeを組み合わせる（jQuery）

ロード時およびサイズ変更時に関数を呼び出したい。

これをよりコンパクトに書き換えるより良い方法はありますか？

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

resizeイベントのみにバインドし、ロード時にこのイベントを自動的にトリガーできます。

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

最後の.resize()呼び出しは、ロード時にこのコードを実行します。

108
Sampson

私は、最善の解決策はそれをロードイベントにもバインドすることだと思います：

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

繰り返しのロジックを見つけて、代わりに関数に分割するのは良いことです。

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

$(document).ready(sizing);
$(window).resize(sizing);
16
Emil Vikström

他の2つの答えの最良の部分を組み合わせます。最初に、繰り返しコードを関数に移動します。第二に、グローバル名前空間を汚染しないでください。

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

アクション指向の関数には動詞が好まれるので、関数にadjust_sizeという名前を付けました。

4
David J.

簡単な方法：

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

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