发表新帖
发表新帖

Combine onload and onresize (jQuery)

前端 未结
关注
5 1094
失恋的感觉
失恋的感觉 2020-12-22 19:29

I want to call the function on load as well as on resize.

Is there a better way to rewrite this more compactly?

$(\'.content .right\').width($(window
相关标签:
5条回答
  • 被撕碎了的回忆
    2020-12-22 19:41

    You can bind to the resize event alone, and trigger this event automatically upon load:

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

    The last .resize() call will run this code upon load.

    0 讨论(0)
  • 栀梦
    2020-12-22 19:48

    It is nice to spot repeating logic and break that out to a function instead:

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

$(document).ready(sizing);
$(window).resize(sizing);
    0 讨论(0)
  • 面向向阳花
    2020-12-22 19:54

    I'm going to combine the best parts of two other answers. First, move repeated code into a function. Second, don't pollute the global namespace.

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

    I named the function adjust_size because I prefer verbs for action-oriented functions.

    0 讨论(0)
  • 慢半拍i
    2020-12-22 20:07

    I think the best solution is just to bind it also to the load event:

    $(window).on('load resize', function () {
    $('.content .right').width( $(this).width() - 480 );
});
    0 讨论(0)
  • 时光说笑
    2020-12-22 20:08

    Simple way:

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

javascript:
$(window).resize(function () { 
...
});
    0 讨论(0)
 看不清?
提交回复
热议问题