如何判断网页图片是否加载完成

发布时间：2026-05-24 文章来源：本站浏览次数：6

在网站性能优化、图片懒加载、CLS优化、页面动画渲染等场景中，精准判断图片是否加载完成是核心基础操作。浏览器加载图片存在加载中、加载成功、加载失败、缓存读取四种状态，普通延时判断无法精准识别，本文分享所有原生、可落地的图片加载完成判断方法，适配各类网站开发与优化场景。

一、核心基础：图片原生状态属性（无需延时、精准判断）

浏览器原生提供图片专属状态属性，可直接读取图片加载进度，是判断图片是否加载完成的基础依据。

1. complete 属性（核心判断依据）

img.complete 是布尔值属性，专门用于判断图片是否加载完毕，涵盖网络加载、本地缓存加载所有场景。

返回 true：图片加载完成（成功/加载失败均判定为完成）；

返回 false：图片正在加载、未开始加载。

适用场景：即时检测图片加载状态、懒加载状态校验、页面初始化图片检测。

const img = document.querySelector('img');
if(img.complete){
  console.log("图片已加载完成");
}else{
  console.log("图片未加载完成/加载中");
}

2. naturalWidth / naturalHeight 原生尺寸判断

图片未加载完成时，原生真实宽高为 0；加载成功后会返回图片真实像素尺寸，可精准区分加载完成且加载成功，规避加载失败误判问题。

判定逻辑：naturalWidth > 0即为图片正常加载完成。

const img = document.querySelector('img');
if(img.complete && img.naturalWidth > 0){
  console.log("图片加载成功且完成");
}else if(img.complete && img.naturalWidth === 0){
  console.log("图片加载完成但加载失败（破损/404）");
}else{
  console.log("图片加载中");
}

二、事件监听法：实时监听图片加载完成（最稳定）

通过原生 load、error 事件监听图片加载结果，可实时捕获加载完成瞬间，支持动态图片、懒加载图片、异步加载图片，适配绝大多数业务场景。

1. load 事件：图片加载成功触发

图片（含缓存图片）加载成功后立即触发，代表图片资源完整加载、可正常渲染。

2. error 事件：图片加载失败触发

图片链接失效、资源损坏、加载超时、跨域失败时触发，判定为加载异常完成。

完整标准代码（兼容缓存+网络加载）

const img = document.querySelector('img');

// 加载成功
img.onload = function(){
  console.log("图片加载完成：成功");
}

// 加载失败
img.onerror = function(){
  console.log("图片加载完成：失败");
}

// 兼容缓存图片：部分缓存图片不会触发onload，需手动检测状态
if(img.complete){
  if(img.naturalWidth > 0){
    console.log("缓存图片已加载完成");
  }
}

三、批量判断：页面多张图片全部加载完成

网站列表页、详情页存在多张图片时，需判断所有图片全部加载完成，常用于页面加载动画关闭、页面渲染初始化、性能统计场景。

// 获取页面所有图片
const allImg = document.querySelectorAll('img');
let loadCount = 0;
const imgTotal = allImg.length;

function checkAllLoad(){
  loadCount++;
  if(loadCount === imgTotal){
    console.log("页面所有图片全部加载完成");
    // 执行图片加载完成后的业务逻辑
  }
}

allImg.forEach(item => {
  // 已加载的缓存图片直接计数
  if(item.complete){
    checkAllLoad();
  }else{
    // 未加载图片监听事件
    item.onload = checkAllLoad;
    item.onerror = checkAllLoad;
  }
})

四、背景图加载完成判断（CSS background 专属）

页面 Banner、模块背景图无法通过 img 标签属性判断，属于特殊场景，需通过动态创建图片对象监听加载状态。

// 获取背景图地址
const bgDom = document.querySelector('.bg-box');
const bgUrl = getComputedStyle(bgDom).backgroundImage.slice(4,-1).replace(/"/g, '');

// 动态创建图片监听加载
const bgImg = new Image();
bgImg.src = bgUrl;
bgImg.onload = function(){
  console.log("背景图片加载完成");
}
bgImg.onerror = function(){
  console.log("背景图片加载失败");
}

五、懒加载图片专属判断方案

开启懒加载的图片（loading="lazy" / JS懒加载），延迟加载特性会导致初始状态检测失效，需结合滚动监听+状态属性双重判断。

1. 可视区域内的懒加载图片：可直接通过 complete + naturalWidth 判断；

2. 可视区域外的懒加载图片：默认未加载，complete 为 false；

3. 滚动触发加载后，自动触发 onload 事件，可精准捕获加载完成状态。

六、常见判断误区（重点避坑）

误区1：仅通过 complete 判断加载成功。complete 为 true 仅代表加载流程结束，包含加载失败、图片破损场景，必须搭配 naturalWidth > 0 验证有效加载；
误区2：使用定时器延时判断。网络波动、图片大小不同，延时判断精准度极低，极易出现误判；
误区3：忽略缓存图片。缓存图片不会重复触发 onload 事件，必须提前检测 complete 状态；
误区4：背景图用普通图片属性判断。背景图不属于 img 标签，原生属性无法识别，需动态创建图片对象监听。

七、总结：最优判断组合公式

单张图片精准判断：complete + naturalWidth 双重校验

动态/异步图片判断：onload + onerror 事件监听

多张图片批量判断：遍历检测缓存状态 + 事件统计

CSS背景图判断：动态Image对象监听加载

上一条：网络公司选择空间时需要考...

下一条：网站图片懒加载的优缺点及...