web-dev-qa-db-fra.com

Combinez onload et onresize (jQuery)

Je veux appeler la fonction aussi bien en charge qu'en redimensionnement.

Existe-t-il une meilleure façon de réécrire cela de manière plus compacte?

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

Vous pouvez vous lier à l'événement resize seul et déclencher cet événement automatiquement lors du chargement:

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

Le dernier appel à .resize() exécutera ce code lors du chargement.

108
Sampson

Je pense que la meilleure solution est simplement de le lier également à l'événement de chargement:

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

Il est agréable de repérer la logique répétitive et de l'exposer à une fonction à la place:

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

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

Je vais combiner les meilleures parties de deux autres réponses. Tout d'abord, déplacez le code répété dans une fonction. Deuxièmement, ne polluez pas l'espace de noms global.

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

J'ai nommé la fonction adjust_size parce que je préfère les verbes pour les fonctions orientées action.

4
David J.

Manière simple:

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

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