时间戳

首页 > 解决方案 > $(window).ready(function() ){} 应该等待图像、css 加载

javascript - $(window).ready(function() ){} 应该等待图像、css 加载

问题描述

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

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

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

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

标签： javascriptjquery

解决方案

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

鉴于问题是您想在重新聚焦选项卡时调整 UI 的大小（大概是在窗口被调整大小而包含您的站点的选项卡不活动的情况下），那么您只需要挂钩到该resize事件。

您可以使用其他技术来了解选项卡何时失去/获得焦点，但鉴于上述问题陈述，它们再次无关紧要。尝试这个：

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

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

推荐阅读