• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共299篇

    前端 - Javascript

关闭

返回栏目

关闭

返回前端 - Javascript栏目

126 - 窗口事件 - load 事件 - 页面加载完成事件

作者：

贺及楼

成为作者

更新日期：2025-02-21 19:59:31

窗口事件 - load 事件 - 页面加载完成事件

在前端开发的世界里，Javascript 扮演着至关重要的角色，它让网页变得生动且富有交互性。而窗口事件中的 load 事件，作为页面加载完成的标志性事件，更是开发者们需要熟练掌握的重要知识点。本文将深入探讨 load 事件的相关内容，从基础概念到实际应用，为你全面解析。

一、load 事件的基本概念

load 事件是一个在整个页面及其所有依赖资源（如图片、脚本文件、样式表等）完全加载完成后触发的事件。这个事件可以绑定到 window 对象上，一旦页面资源全部加载完毕，绑定的事件处理函数就会被执行。

以下是一个简单的示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Load Event Example</title>
  8. </head>
  10. <body>
  11.     <img src="example.jpg" alt="Example Image">
  12.     <script>
  13.         window.addEventListener('load', function () {
  14.             console.log('页面及其所有资源已加载完成');
  15.         });
  16.     </script>
  17. </body>
  19. </html>

在上述代码中，当页面中的 HTML 结构、图片等所有资源都加载完成后，控制台会输出“页面及其所有资源已加载完成”。

二、load 事件与 DOMContentLoaded 事件的区别

在实际开发中，还有一个与页面加载相关的重要事件 DOMContentLoaded，它与 load 事件容易混淆，下面通过表格来对比它们的区别：
| 事件名称 | 触发条件 | 触发时机 | 应用场景 |
| —— | —— | —— | —— |
| load | 整个页面及其所有依赖资源（如图片、脚本文件、样式表等）完全加载完成 | 页面资源全部加载完毕后 | 需要确保所有资源都加载完成后执行某些操作，如图片懒加载后的统计、初始化依赖外部资源的插件等 |
| DOMContentLoaded | HTML 文档被完全解析和构建成 DOM 树，不等待图片等外部资源加载完成 | HTML 结构加载并解析完成后 | 当你只需要操作 DOM 结构，而不需要等待所有资源加载完成时，如表单验证、菜单交互等 |

以下是一个对比示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Load vs DOMContentLoaded</title>
  8. </head>
  10. <body>
  11.     <img src="large-image.jpg" alt="Large Image">
  12.     <script>
  13.         document.addEventListener('DOMContentLoaded', function () {
  14.             console.log('DOM 结构已加载完成');
  15.         });
  17.         window.addEventListener('load', function () {
  18.             console.log('页面及其所有资源已加载完成');
  19.         });
  20.     </script>
  21. </body>
  23. </html>

在这个示例中，你会发现 DOMContentLoaded 事件会先触发，因为它只等待 HTML 结构解析完成，而 load 事件会在图片等所有资源加载完成后才触发。

三、load 事件的实际应用场景

1. 图片加载完成后的处理

有时候我们需要在图片加载完成后对其进行一些操作，比如调整图片大小、添加特效等。可以使用 load 事件来确保图片已经完全加载。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Image Load Example</title>
  8. </head>
  10. <body>
  11.     <img id="myImage" src="example.jpg" alt="Example Image">
  12.     <script>
  13.         const img = document.getElementById('myImage');
  14.         img.addEventListener('load', function () {
  15.             this.style.opacity = 1; // 图片加载完成后显示
  16.         });
  17.     </script>
  18. </body>
  20. </html>

2. 初始化依赖外部资源的插件

有些插件需要在所有资源加载完成后才能正常初始化，这时可以使用 load 事件来确保插件初始化的时机。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Plugin Initialization Example</title>
  8.     <link rel="stylesheet" href="plugin.css">
  9. </head>
  11. <body>
  12.     <div id="plugin-container"></div>
  13.     <script src="plugin.js"></script>
  14.     <script>
  15.         window.addEventListener('load', function () {
  16.             // 初始化插件
  17.             const plugin = new Plugin({
  18.                 container: document.getElementById('plugin-container')
  19.             });
  20.             plugin.init();
  21.         });
  22.     </script>
  23. </body>
  25. </html>

四、总结

load 事件在前端开发中是一个非常实用的事件，它可以帮助我们确保页面及其所有依赖资源都加载完成后再执行特定的操作。通过了解 load 事件与 DOMContentLoaded 事件的区别，我们可以根据实际需求选择合适的事件来处理不同的场景。无论是图片加载处理还是插件初始化，合理运用 load 事件都能让我们的网页更加稳定和流畅。

希望本文能帮助你更好地理解和应用 load 事件，在前端开发的道路上更进一步！