在网页开发中，我们常常需要在页面加载完成后执行特定的JavaScript函数。本文将介绍如何正确地在页面加载过程中调用JS函数，确保代码的有效执行。 首先，我们需要明确一点：为了确保JavaScript函数在页面元素加载完成后执行，我们应该将脚本放在文档的底部，或者使用事件监听器等待页面加载完成后再执行函数。 以下是几种在页面加载时调用JS函数的方法：

1. 内联脚本：直接在HTML标签内使用。例如，在body标签的末尾添加脚本： <script> function myFunction() { // 函数内容 } myFunction(); </script>
2. script标签：将JavaScript代码放在单独的script标签中，并将其置于HTML文档的底部。这样能保证在执行脚本时，所有的DOM元素都已经加载完成。 <script src="myScript.js"></script>
3. 事件监听器：使用window.onload或DOMContentLoaded事件。例如： <script> window.addEventListener('load', function() { myFunction(); }); // 或 document.addEventListener('DOMContentLoaded', function() { myFunction(); }); </script> window.onload在所有内容，包括图片、脚本等加载完成后触发，而DOMContentLoaded则在DOM加载完成后立即触发。
4. 延迟脚本：如果脚本是独立的，并且可以在不影响页面显示的情况下稍后加载，可以使用defer属性。 <script defer src="myDeferredScript.js"></script> defer属性确保脚本在文档解析完成后，但在触发DOMContentLoaded事件之前执行。 总结，确保在页面加载时正确调用JS函数的关键是了解不同方法的执行时机。合理选择方法，可以避免由于元素未加载导致的JavaScript错误，并提高页面性能。 在实际开发中，推荐使用事件监听器或defer属性，因为它们能够更好地控制脚本的加载和执行时机。