在網頁設計中，經常需要在頁面中插入圖片，以豐富頁面內容，提升使用者體驗。但在實際開發中，不可避免會出現圖片載入失敗、不存在等問題，而頁面上空白的圖片往往會影響使用者的觀感。為了解決這個問題，我們可以透過設定預設圖片的方式來提高使用者體驗，為此我們可以使用jQuery庫來實現。下面就讓我們來詳細了解如何使用jQuery設定預設圖片。
一、載入jQuery函式庫
首先，我們需要在HTML檔中引入jQuery函式庫，程式碼如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
這裡使用的是CDN方式引進jQuery函式庫，當然也可以在本地引入。
二、設定預設圖片
接下來，我們需要在HTML頁面中設定預設圖片。在實際項目中，我們可以根據需求，設定一張尺寸和相對應內容合適的圖片作為預設圖片。例如，我們可以在程式碼中加入以下HTML程式碼：
<img src="default.jpg" alt="默认图片">
這裡的default.jpg即為我們設定的預設圖片。
三、使用jQuery設定預設圖片
下面，我們來看看如何使用jQuery函式庫來設定預設圖片。
我們首先需要偵測圖片是否成功載入。如果圖片載入成功，則顯示圖片本身；如果圖片載入失敗，則使用我們先前設定的預設圖片。程式碼如下：
$('img').each(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
$(this).attr('src', 'default.jpg');
}
});這裡的$('img')表示選擇所有的圖片，其each()方法表示遍歷每一個元素。當圖片沒有成功載入時，使用attr()方法將該圖片的src屬性改為我們設定的預設圖片。
我們也可以使用事件監聽來實現圖片載入成功與失敗的操作，程式碼如下：
$('img').on('error', function() {
$(this).attr('src', 'default.jpg');
});這裡的$ ('img')表示選擇所有的圖片，使用on()方法來監聽圖片的error事件。當事件觸發時，使用attr()方法將該圖片的src屬性改為我們設定的預設圖片。
要注意的是，以上兩種方法都可以使用，但是第二種方法需要在圖片載入出錯時才會執行，而第一種方法則可以做到在圖片載入完成之前就能夠設定預設圖片。
四、總結
至此，我們已經完成了使用jQuery來設定預設圖片的操作。透過這種方式，即使出現圖片載入錯誤的情況，也能更好地保障使用者體驗，同時也能讓頁面更加完整美觀。在實際專案中，我們可以根據需求和具體情況，靈活運用此方法，提高網站的使用者體驗度。
以上是jquery設定預設圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
