jquery怎麼檢查圖片是否存在-前端問答-PHP中文網

jquery怎麼檢查圖片是否存在

PHPz

發布： 2023-04-07 14:26:04

原創

1151 人瀏覽過

對於需要展示圖片的網站而言，我們可能會將圖片的路徑存在資料庫中或是透過 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”。

二、處理圖片不存在的情況

當我們偵測到圖片不存在時，可以透過以下幾種方式做出對應處理：

在圖片不存在的情況下，我們可以在網站中為每個圖片新增一個預設的「暫無圖片」圖片。當偵測到圖片不存在時，我們可以透過修改圖片元素的src 屬性來展示預設圖片，程式碼如下：

$('img').on('error', function() {
  $(this).attr('src', 'default.jpg');
});

登入後複製

在上述程式碼中，當偵測到圖片不存在時，我們將這個元素的src 屬性修改為default.jpg，以便顯示預設圖片。

我們也可以在圖片載入失敗時，在圖片位置展示一個提示文本，提示使用者目前展示的圖片載入失敗。程式碼如下：

$('img').on('error', function() {
  $(this).after('<p class="load-error">图片加载失败</p>');
});

登入後複製

在上述程式碼中，我們透過 .after() 方法在圖片元素後面添加了一個

元素用於展示圖片載入失敗的提示文字。

當圖片不存在時，我們也可以將它的容器（例如

元素）隱藏起來，以便頁面佈局更加美觀。程式碼如下：

$('img').on('error', function() {
  $(this).parent().hide();
});

登入後複製

在上述程式碼中，當我們偵測到圖片不存在時，我們使用 .parent() 方法選擇目前圖片的父元素，然後使用 .hide() 方法將它隱藏起來。

三、總結

在本文中，我們介紹了透過 jQuery 檢查圖片是否存在並做出對應處理的方法。在處理圖片不存在的情況時，我們可以根據實際需求來展示預設圖片、提示內容或是隱藏容器，以便提升使用者體驗和頁面佈局。

以上是jquery怎麼檢查圖片是否存在的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也