javascript - 将函数绑定(bind)到窗口调整大小和窗口滚动，但也立即调用它

Question

因此，在网页上有一些组件必须在浏览器窗口重新调整大小或滚动时重新定位。

$( window ).on( 'resize scroll', reposition );

其中 reposition 是执行此操作的函数。

但是，该函数也必须立即调用。 (立即，我的意思是在页面初始化时 - 在 DOM 准备就绪的内部。)这需要完成以设置组件的初始位置。

我目前是这样做的:

$( window ).on( 'resize scroll', reposition );
reposition();

我注意到这也有效:

$( window ).on( 'resize scroll load', reposition );

我相信这是可靠的 - load 永远不会在 DOMContentLoaded 事件之前触发。

但这会延迟执行，直到所有页面资源都已加载(这可能需要几秒钟，具体取决于页面上有多少图像)。有什么方法可以告诉 jQuery 也应该立即调用绑定(bind)的函数吗？

喜欢:

$( window ).on( 'resize scroll now', reposition );

或

$( window ).on( 'resize scroll ()', reposition );

这些例子当然是无效的，但我想知道jQuery的on方法是否有这样的功能。我想，我可以手动将此功能实现到 on 中，但我想先检查它是否已经具备...

Answer 1

你可以这样做:

$(window).on('resize scroll', reposition).trigger('scroll');

设置和触发事件回调。

尽管为了安全起见，您应该在 $(document).ready 中设置它。基本上你的代码应该是这样的:

$(document).ready(function() {
    $(window).on('resize scroll', reposition).trigger('scroll');
});

所以你可以保证 DOM 已经准备好让你随意摆弄