webentwicklung-frage-antwort-db.com.de

Onload und Onresize kombinieren (jQuery)

Ich möchte die Funktion sowohl beim Laden als auch beim Ändern der Größe aufrufen.

Gibt es eine bessere Möglichkeit, dies kompakter umzuschreiben?

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

Sie können nur an das Ereignis resize binden und dieses Ereignis beim Laden automatisch auslösen:

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

Der letzte Aufruf von .resize() führt diesen Code beim Laden aus.

108
Sampson

Ich denke, die beste Lösung besteht darin, es auch an das Ladeereignis zu binden:

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

Es ist schön, sich wiederholende Logik zu erkennen und diese stattdessen in eine Funktion aufzuteilen:

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

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

Ich werde die besten Teile von zwei anderen Antworten kombinieren. Verschieben Sie zunächst den wiederholten Code in eine Funktion. Zweitens, verschmutzen Sie nicht den globalen Namespace.

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

Ich habe die Funktion adjust_size weil ich Verben für handlungsorientierte Funktionen bevorzuge.

4
David J.

Einfacher Weg:

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

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