一、核心基礎(chǔ)：圖片原生狀態(tài)屬性（無(wú)需延時(shí)、精準(zhǔn)判斷）

1. complete 屬性（核心判斷依據(jù)）

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

2. naturalWidth / naturalHeight 原生尺寸判斷

const img = document.querySelector('img');
if(img.complete && img.naturalWidth > 0){
  console.log("圖片加載成功且完成");
}else if(img.complete && img.naturalWidth === 0){
  console.log("圖片加載完成但加載失�。ㄆ茡p/404）");
}else{
  console.log("圖片加載中");
}

二、事件監(jiān)聽(tīng)法：實(shí)時(shí)監(jiān)聽(tīng)圖片加載完成（最穩(wěn)定）

1. load 事件：圖片加載成功觸發(fā)

2. error 事件：圖片加載失敗觸發(fā)

完整標(biāo)準(zhǔn)代碼（兼容緩存+網(wǎng)絡(luò)加載）

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

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

// 加載失敗
img.onerror = function(){
  console.log("圖片加載完成：失敗");
}

// 兼容緩存圖片：部分緩存圖片不會(huì)觸發(fā)onload，需手動(dòng)檢測(cè)狀態(tài)
if(img.complete){
  if(img.naturalWidth > 0){
    console.log("緩存圖片已加載完成");
  }
}

三、批量判斷：頁(yè)面多張圖片全部加載完成

// 獲取頁(yè)面所有圖片
const allImg = document.querySelectorAll('img');
let loadCount = 0;
const imgTotal = allImg.length;

function checkAllLoad(){
  loadCount++;
  if(loadCount === imgTotal){
    console.log("頁(yè)面所有圖片全部加載完成");
    // 執(zhí)行圖片加載完成后的業(yè)務(wù)邏輯
  }
}

allImg.forEach(item => {
  // 已加載的緩存圖片直接計(jì)數(shù)
  if(item.complete){
    checkAllLoad();
  }else{
    // 未加載圖片監(jiān)聽(tīng)事件
    item.onload = checkAllLoad;
    item.onerror = checkAllLoad;
  }
})

四、背景圖加載完成判斷（CSS background 專屬）

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

// 動(dòng)態(tài)創(chuàng)建圖片監(jiān)聽(tīng)加載
const bgImg = new Image();
bgImg.src = bgUrl;
bgImg.onload = function(){
  console.log("背景圖片加載完成");
}
bgImg.onerror = function(){
  console.log("背景圖片加載失敗");
}

五、懶加載圖片專屬判斷方案

六、常見(jiàn)判斷誤區(qū)（重點(diǎn)避坑）

• 誤區(qū)1：僅通過(guò) complete 判斷加載成功。complete 為 true 僅代表加載流程結(jié)束，包含加載失敗、圖片破損場(chǎng)景，必須搭配 naturalWidth > 0 驗(yàn)證有效加載；
• 誤區(qū)2：使用定時(shí)器延時(shí)判斷。網(wǎng)絡(luò)波動(dòng)、圖片大小不同，延時(shí)判斷精準(zhǔn)度極低，極易出現(xiàn)誤判；
• 誤區(qū)3：忽略緩存圖片。緩存圖片不會(huì)重復(fù)觸發(fā) onload 事件，必須提前檢測(cè) complete 狀態(tài)；
• 誤區(qū)4：背景圖用普通圖片屬性判斷。背景圖不屬于 img 標(biāo)簽，原生屬性無(wú)法識(shí)別，需動(dòng)態(tài)創(chuàng)建圖片對(duì)象監(jiān)聽(tīng)。

七、總結(jié)：最優(yōu)判斷組合公式