對於需要展示圖片的網站而言，我們可能會將圖片的路徑存在資料庫中或是透過 API 傳回的資料中。當我們需要在頁面中展示圖片時，有時會遇到圖片不存在的情況，此時頁面上空白的圖片展示會為使用者帶來不良體驗。為了提升使用者體驗，我們可以透過 jQuery 來檢查圖片是否存在並進行相應處理。
一、使用 jQuery 檢查圖片是否存在
我們可以透過 .load() 方法來偵測映像是否成功載入。 .load() 方法會在所選元素載入完成時觸發事件。如果圖片成功加載，則會觸發load 事件；否則會觸發error 事件，如下所示：
$('img').on('load', function() {
console.log('Image is loaded');
}).on('error', function() {
console.log('Image is not loaded');
});在上面的範例中，我們首先選擇所有的圖片元素，然後監聽它們的load 和error 事件，圖片成功載入時輸出“Image is loaded”，否則輸出“Image is not loaded”。
二、處理圖片不存在的情況
當我們偵測到圖片不存在時，可以透過以下幾種方式做出對應處理：
$('img').on('error', function() {
$(this).attr('src', 'default.jpg');
});$('img').on('error', function() {
$(this).after('<p class="load-error">图片加载失败</p>');
});元素用於展示圖片載入失敗的提示文字。
$('img').on('error', function() {
$(this).parent().hide();
});以上是jquery怎麼檢查圖片是否存在的詳細內容。更多資訊請關注PHP中文網其他相關文章！
