js onload 事件

JavaScript onload事件详解

最新推荐文章于 2025-05-28 10:49:38 发布

原创最新推荐文章于 2025-05-28 10:49:38 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端全栈开发专栏收录该内容

207 篇文章

订阅专栏

在JavaScript中，onload事件是当页面或者页面中的某个元素完全加载完成时触发的事件。常见的使用场景包括在页面加载完成后执行一些初始化操作，或者在图片加载完成后执行某些操作。

下面是一个关于onload事件的详细解析和代码示例：

在页面上绑定onload事件：

<body onload="myFunction()">

在<body>标签上使用onload属性，可以指定页面加载完成后需要执行的函数。在这个例子中，myFunction()函数会在页面加载完成后被调用。

在JavaScript中绑定onload事件：

window.onload = function() {
  // 执行一些操作
};

通过window.onload属性可以绑定全局的onload事件处理函数。在这个例子中，匿名函数会在页面加载完成后被调用。

绑定图片的onload事件：

var image = new Image();
image.onload = function() {
  // 图片加载完成后执行的操作
};
image.src = "image.jpg";

在这个例子中，我们创建了一个Image对象，并通过onload属性绑定了一个事件处理函数。当图片加载完成后，这个事件处理函数会被调用。

需要注意的是，如果图片已经在缓存中存在，那么onload事件可能会立即触发。为了避免这种情况，可以使用complete属性进行判断：

var image = new Image();
image.onload = function() {
  if (image.complete) {
    // 图片已经加载完成
  }
};
image.src = "image.jpg";

绑定多个元素的onload事件：

var elements = document.getElementsByClassName("my-element");
for (var i = 0; i < elements.length; i++) {
  elements[i].onload = function() {
    // 每个元素加载完成后执行的操作
  };
}

在这个例子中，我们使用getElementsByClassName()方法获取所有具有my-element类名的元素，并分别为它们绑定onload事件处理函数。每当一个元素加载完成后，对应的事件处理函数会被调用。

总结：onload事件是在页面或元素加载完成后触发的事件，在JavaScript中可以使用onload属性或者onload事件处理函数来绑定该事件。