jQuery load()事件：元素加载完成的监听-代码号

在页面开发中，有些资源不是瞬间就能加载完的——图片、脚本、iframe 等内容需要时间从服务器传输到浏览器。load() 事件就是专门用来监听这些元素加载完成时刻的方法。当指定的元素（如图片、窗口、iframe）加载完毕后，绑定的回调函数就会被执行。

不过需要先说明一个重要的版本信息：load() 事件方法从 jQuery 1.8 版本开始被标记为弃用（deprecated），官方建议用 .on("load", function(){...}) 来替代。但理解它的用法仍然有必要——很多老项目里还在使用这个写法，而且它和 AJAX 的 load() 方法虽然名字一样但功能不同，了解区别能避免混淆。

语法形式

$(selector).load(function(){
    // 元素加载完成后执行的代码
})

selector 通常是图片、窗口对象（window）、iframe 等需要加载的资源元素。回调函数在加载完成时执行。

基础示例：图片加载完成后弹出提示

下面这个例子用 load() 监听图片的加载状态。页面上有一张图片，当它从服务器加载完成时弹出 alert 提示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>load() 图片加载示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <img id="demoImage" src="https://www.ebingou.cn/biancheng/images/1.jpg" alt="编程学习配图" style="max-width:100%;">
    <p id="loadStatus" style="color:#888;">图片加载中...</p>

    <script>
        $(document).ready(function(){
            $("img").load(function(){
                $("#loadStatus").text("图片加载完成！").css("color", "#27ae60");
            });
        });
    </script>
</body>
</html>

页面打开后，图片区域会逐渐显示出来，加载完成后状态文字从灰色变为绿色。这个流程在需要处理大图展示、图片画廊预加载等场景时很实用。

缓存导致 load 不触发的问题

load() 事件有一个非常容易踩的坑：如果资源已经被浏览器缓存，load 事件可能不会触发。不同浏览器对这个行为的实现有差异，导致在某些情况下图片加载的回调不会执行。

这个问题在项目里出现过很多次——本地开发时好好的，上线后偶尔不生效，排查半天才发现是缓存导致的。为了避免这个问题，有几条经验可以分享：

方案一：绑定事件前先检查资源是否已经加载完成。 对于图片，可以检查它的 complete 属性：

$("img").each(function(){
    if(this.complete){
        // 图片已经加载完成（可能是缓存），直接执行逻辑
        onImageLoaded();
    } else {
        // 还没加载完，绑定 load 事件等待
        $(this).load(onImageLoaded);
    }
});

方案二：用 on() 代替已弃用的 load()，并在 src 设置之前绑定事件。 先把事件绑好，再给图片设置 src 属性触发加载，这样能确保事件不会错过。这也是现在推荐的做法。

window.load 和 document.ready 的区别

这两个经常被放在一起比较，它们的触发时机不同：

$(document).ready()：DOM 结构加载完毕就触发，不需要等图片、iframe 等外部资源。适合绑定事件、操作 DOM 等初始化逻辑。
$(window).load()：等页面所有资源（图片、样式表、脚本、iframe 等）全部加载完成后才触发。

项目开发中，$(document).ready() 的使用频率远高于 $(window).load()。因为大多数 JS 逻辑不需要等图片全部加载完才能运行，等太久反而影响用户体验。只有需要获取图片实际尺寸、处理全页预加载动画等特殊场景才用 window.load。

AJAX 的 load() 方法和事件 load() 的区别

jQuery 里有两个叫 load 的方法，功能不一样，别搞混：

事件方法 load()：绑定在元素上，监听元素加载完成（本文讲的内容）。已弃用，用 on("load") 替代。
AJAX 方法 load()：用于从服务器加载 HTML 数据并插入到选中元素中。语法是 $(selector).load(url, data, callback)。

两者只是名字相同，作用不同。阅读代码时根据参数和上下文来判断是哪一种——只传一个函数参数的是事件绑定，传 URL 字符串的是 AJAX 加载。

本节课程知识要点

load() 事件用于监听元素（图片、窗口、iframe 等）加载完成的时刻。
从 jQuery 1.8 起已被弃用，推荐使用 $(selector).on("load", function(){...}) 替代。
浏览器缓存可能导致 load 事件不触发，建议先检查资源是否已加载完成再决定绑定方式。
$(document).ready() 和 $(window).load() 触发时机不同：前者等 DOM，后者等全部资源。
事件 load() 和 AJAX 方法 load(url) 是两回事，注意根据参数区分。

load() 事件虽然在较新版本的 jQuery 中已经被弃用，但它背后的概念——监听资源加载完成——在 Web 开发中仍然很重要。无论是图片懒加载、页面预加载动画还是 iframe 通信，都需要在合适的时机知道资源是否就绪。理解 load 事件的触发机制以及它因为缓存可能失效的特性，能帮助避开一些隐蔽的问题。用 on("load") 来替代旧的 load() 写法，同时做好缓存情况的判断，就能在现在项目里继续稳妥地用这套机制。

本文标签：

jQuery load()事件：元素加载完成的监听