$(document).ready()是jQuery中常用的一个事件，它在DOM加载完成后立即执行。但有时候我们会发现，即使DOM已经加载完毕，$(document).ready()事件也会过早地被触发，导致一些代码无法正常执行。
原因分析
$(document).ready()事件过早触发的原因是因为它只关注了DOM的加载状态，而没有考虑其他资源（如图片、样式、脚本等）的加载状态。当页面包含大量资源时，这些资源可能还未被完全加载，此时$(document).ready()事件就会过早触发。
解决方案
方案一：使用window.onload事件
window.onload事件会在所有资源都加载完成后才触发，可以解决$(document).ready()过早触发的问题。但是，它会等待所有资源加载完成，可能导致页面加载速度变慢。
示例代码：
------------- - ---------- - -- --------------- --
方案二：使用defer属性
defer属性可以让浏览器在所有资源加载完成后再执行脚本，可以避免脚本影响页面渲染。不过，它只适用于外部脚本文件，对于内部脚本和行内脚本无效。
示例代码：
------- ---------------- ---------------
方案三：使用setTimeout延时执行
使用setTimeout可以在一定时间后执行指定的函数，可以等待其他资源加载完成后再执行需要的操作。但是，这种方法并不能保证所有资源都已经加载完成。
示例代码：
---------------------------- -
--------------------- -
-- ---------
-- -----
---总结
$(document).ready()事件过早触发的问题是因为它只关注了DOM的加载状态。解决方案包括使用window.onload事件、defer属性和setTimeout延时执行等方法。我们需要根据具体情况选择合适的方法来解决问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29884