在前端开发中，我们经常需要使用第三方库和插件来实现我们的功能需求。其中，jQuery作为最受欢迎之一的JavaScript库之一，被广泛应用于各种网站和应用程序中。
然而，在使用jQuery时，我们经常会遇到一个问题：当jQuery脚本加载时，页面上的其他资源（如图片、CSS文件等）可能还没有加载完毕，这会导致一些不可预期的问题，例如UI组件未能正确渲染、交互行为异常等。因此，我们需要一种方法来确保jQuery脚本仅在所有其他资源都加载完毕后才执行。
使用defer属性
HTML5引入了defer属性，该属性可以用于延迟脚本的执行，直到文档解析和其他资源加载完成。如果将jQuery脚本添加defer属性，则浏览器会将其推迟到文档解析和其他资源加载完毕之后再执行。
--------- -----
------
------
----- --------------- --
--------- ---------------
------- ------------------------------------------------- ---------------
-------
------
---- ---- ---
-------
-------使用defer属性是最简单的方法，但也存在一些限制。defer属性仅适用于外部脚本（即通过<script>标签引入的脚本），因为浏览器可以控制它们的加载顺序。此外，如果页面中有多个延迟脚本，它们将按照它们在文档中出现的顺序依次执行。
使用DOMContentLoaded事件
另一种方法是使用DOMContentLoaded事件。该事件表示文档已经解析完成并且所有DOM元素都已经就绪，但不包括其他资源的加载状态（如图片、CSS文件等）。因此，当我们确保所有其他资源都已加载完毕时，可以考虑在DOMContentLoaded事件处理程序中执行jQuery脚本。
--------- -----
------
------
----- --------------- --
--------- ---------------
------- -----------------------------------------------------------
--------
--------------------------------------------- -------- -- -
-- -------------
--------------------------------- -------
---
---------
-------
------
---- ---- ---
-------
-------使用DOMContentLoaded事件，我们可以更灵活地控制脚本的执行时间，并允许我们在需要时进行其他资源的加载和处理。但是，由于jQuery的某些功能需要等待所有资源加载完成后才能正常工作，因此在某些情况下，这种方法可能不可行。
使用window.onload事件
如果我们需要确保所有资源都已经加载完毕，并且需要在此基础上执行jQuery脚本，可以使用window.onload事件。该事件表示所有资源（包括图片、CSS文件等）都已经加载完成，页面已经完全就绪。
--------- -----
------
------
----- --------------- --
--------- ---------------
------- -----------------------------------------------------------
--------
------------- - -------- -- -
-- -------------
--------------------------------- -------
--
---------
-------
------
---- ---- ---
-------
-------与DOMContentLoaded事件相比，window.onload事件需要等待更长的时间，因为它
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11256