$(document).ready() 执行时 CSS 值可用吗?
问题:
为什么脚本执行于$(document).ready,在具有动态内容对齐的页面上有时会滞后或故障?
答案:
根据 jQuery 的发行说明和文档,$(document).ready() 可能不会等待 CSS 值完全注入到DOM。因此,建议将所有 CSS 文件包含在
中。
说明:
-
异步 CSS 加载: CSS 文件是异步加载的,这意味着 JavaScript 可以在 CSS 之前执行渲染完成。
-
CSS 对 JS 的依赖计算: 在某些情况下,JavaScript 计算依赖于 CSS 值来确定元素尺寸和位置,如果 CSS 值尚不可用,这可能会导致不准确。
-
浏览器特定行为: 在所提出的问题中观察到的行为可能与特定的浏览器行为有关,例如as:
-
Internet Explorer:有时会停止 JS 执行,直到加载外部 CSS,特别是当 CSS 放置在页面中的 JS 之上时。
-
其他浏览器: 即使 CSS 未完全执行,也可能并不总是停止 JS 执行
解决方案:
确保 $(document).ready() 执行时 CSS 值可用:
- 始终在 中的 JavaScript 引用之前包含 CSS 文件。
- 如果可能,请考虑在加载所有 CSS 和内容后将脚本移动到页面底部。
附加说明:
- 大多数情况下,将 CSS 放在 JS 之上将解决与 CSS 对 JS 依赖相关的性能问题
- 但是,与异步资源加载和脚本执行相关的复杂的浏览器特定行为仍然可能发生。
以上是$(document).ready() 是否始终可以访问最终的 CSS 值?的详细内容。更多信息请关注PHP中文网其他相关文章!