可通過JavaScript動態(tài)創(chuàng)建img元素并設(shè)置src實(shí)現(xiàn)圖片加載，如document.createElement('img')并添加到DOM；2. 可監(jiān)聽onload和onerror事件處理加載成功或失??；3. 可通過修改已有img元素的src屬性替換圖片；4. 懶加載可通過data-src存儲路徑，待時(shí)機(jī)成熟再賦值src以優(yōu)化性能。

在HTML中，圖片可以通過JavaScript動態(tài)加載，而不是直接寫在HTML標(biāo)簽里。這種方法常用于懶加載、條件加載或優(yōu)化頁面性能。實(shí)現(xiàn)方式主要是通過創(chuàng)建<img>元素并設(shè)置其src屬性，然后插入到頁面中。

1. 創(chuàng)建img元素并設(shè)置src

使用document.createElement('img')7&gt;創(chuàng)建一個(gè)新的圖片元素，然后通過<code>setAttribute或直接賦值的方式設(shè)置圖片路徑。

const img = document.createElement('img');
img.src = 'path/to/your/image.jpg';
img.alt = '動態(tài)加載的圖片';
document.body.appendChild(img); // 將圖片添加到頁面
  

這樣圖片就會開始加載并顯示在頁面上。

2. 添加加載完成回調(diào)

有時(shí)需要在圖片成功加載后執(zhí)行某些操作，比如顯示動畫或記錄日志，可以監(jiān)聽load事件。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

AI卡通生成器

免費(fèi)在線AI卡通圖片生成器 | 一鍵將圖片或文本轉(zhuǎn)換成精美卡通形象

51

查看詳情

const img = document.createElement('img');
img.src = 'path/to/your/image.jpg';
img.onload = function() {
  console.log('圖片加載完成');
  document.body.appendChild(img);
};
img.onerror = function() {
  console.log('圖片加載失敗');
};
  

3. 動態(tài)替換已有圖片

也可以通過JS修改已有<img>標(biāo)簽的src屬性來實(shí)現(xiàn)動態(tài)更換圖片。

假設(shè)HTML中有：

<img id="myImage" src="">

const image = document.getElementById('myImage');
image.src = 'new-image.jpg';
image.alt = '新圖片';
  

4. 懶加載簡單實(shí)現(xiàn)

將圖片的真正地址存放在data-src屬性中，等需要時(shí)再用JS賦值給src。

HTML:

<img  class="lazy">

const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(img => {
  img.src = img.dataset.src;
  img.classList.remove('lazy');
});
  

基本上就這些。通過JS控制圖片加載，能更好地管理資源和用戶體驗(yàn)。不復(fù)雜但容易忽略細(xì)節(jié)，比如錯(cuò)誤處理和加載狀態(tài)。

以上就是HTML中的圖片如何通過JS動態(tài)加載_HTML中圖片通過JS動態(tài)加載方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！