$(window).ready(function() ){} 应该等待 images，css 加载

Question

目前我正在使用适合特定窗口中UI的_fitScreen函数。我正在从$(window).load()调用_fitScreen函数。但是，window.load()仅在页面完全加载时执行，即如果我按 CTRL+F5。我想在选项卡之间切换时执行_fitScreen。

$(window).load(function() {
me._fitScreen();
}); 

我知道我可以使用$(window).ready(function() {})，但ready()不会等待图像或CSS加载。

谁能建议我如何使用ready()等待图像和CSS加载？我不想使用第三方插件。

Answer 1

使用document.ready不会解决任何问题。它在加载 CSS 和图像之前运行的事实与该问题无关。

鉴于问题是您希望在重新聚焦选项卡时调整 UI 的大小(大概是在保存站点的选项卡未处于活动状态时调整窗口大小(，那么您只需要挂接到resize事件。

您可以使用其他技术来了解选项卡何时失去/获得焦点，但鉴于上面的问题陈述，它们同样不相关。试试这个：

$(window).on('load resize', function() {
me._fitScreen();
});

您还应该注意，依靠JS根据屏幕大小修复UI是一个非常糟糕的主意。请改用 CSS 媒体查询，并完全避免此问题。