在網頁開發中，經常會遇到需要加載圖片的情況。當圖片過大或者網絡狀況不佳時，圖片加載可能需要一定的時間。為了給用戶更好的體驗，我們可以通過添加"正在加載圖片"的提示，讓用戶知道圖片正在加載中，這樣可以避免用戶以為頁面出現了問題或者圖片加載失敗。

下面通過幾個代碼案例來詳細說明如何實現"div 正在加載圖片"的效果。

案例一：

<div id="loading" style="display: none;">正在加載圖片...</div>
<img src="image.png" onload="document.getElementById('loading').style.display = 'none';"
onerror="document.getElementById('loading').style.display = 'none';">

在這個案例中，我們使用了一個<div>元素來顯示"正在加載圖片"的提示。通過將該元素的display屬性設為none，初始時隱藏了該提示。當圖片成功加載完成或者加載失敗時，通過onload和onerror事件來控制<div>元素的顯示狀態。當圖片成功加載完成時，將<div>元素的display屬性設置為none，隱藏該提示；當圖片加載失敗時，同樣隱藏該提示。

案例二：

<div id="loading">正在加載圖片...</div>
<img src="image.png" onload="hideLoading()" onerror="hideLoading()">
<br>
  <script>
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
</script>

在這個案例中，我們同樣使用了一個<div>元素來顯示"正在加載圖片"的提示。不同的是，在此案例中我們將顯示和隱藏提示的操作封裝在了一個函數hideLoading()中。當圖片加載完成或者加載失敗時，通過onload和onerror事件調用hideLoading()函數來隱藏提示。

通過上述案例，我們可以看到在代碼中如何使用<div>元素來實現"正在加載圖片"的效果，并在圖片加載成功或者失敗時控制這個<div>元素的顯示和隱藏。

參考真實案例：

網站頭部的圖片通常都比較大，加載時間可能會較長。為了給用戶更好的體驗，許多網站在圖片加載時都會添加"正在加載圖片"的提示。例如，知乎日報網站的手機端頁面在加載頂部的圖片時會出現一個"加載中"的進度條，以提示用戶圖片正在加載中。

：

通過以上的案例和參考真實案例，我們可以了解到在網頁開發中，為了提升用戶體驗，使用<div>元素顯示"正在加載圖片"的提示是一種常見而有效的方法。我們可以根據需要選擇使用不同的方式來實現這個效果。無論是直接在圖片標簽上添加onload和onerror事件，還是將顯示和隱藏操作封裝在一個函數中，都能達到我們的需求。希望以上內容對你有所幫助。