onerror
事件,該事件會在圖片載入失敗時被觸發。我們可以利用這個事件,編寫 JavaScript 程式碼來實現替代顯示的功能。以下是一個具體的範例:
<p>HTML 程式碼:<img id="myImage" src="path/to/image.jpg" onerror="handleImageError()" />
function handleImageError() { var img = document.getElementById("myImage"); img.src = "path/to/default-image.jpg"; img.alt = "Image Failed to Load"; }
<img>
元素加入了一個onerror
事件,並綁定了一個叫做handleImageError()
的函數。當圖片載入失敗時,handleImageError()
函數會被觸發。 <p>在handleImageError()
函數中,我們先透過document.getElementById()
方法取得了<img>
元素的DOM 物件。然後,將src
屬性設定為我們希望顯示的預設圖片(path/to/default-image.jpg
),並將alt
屬性設為自定義的提示訊息("Image Failed to Load")。 <p>透過上述程式碼,當圖片載入失敗時,會自動取代顯示預設的圖片,並給予對應的提示訊息。這樣,無論是使用者造訪網頁時網路不穩定,還是圖片連結錯誤,都可以提供友善的使用者提示。 <p>除了替代顯示預設圖片,我們還可以根據實際需求自訂顯示的文字。以下是一個範例,當圖片載入失敗時顯示「圖片載入失敗」這段文字:<p>HTML 程式碼:<img id="myImage" src="path/to/image.jpg" onerror="handleImageError()" />
function handleImageError() { var img = document.getElementById("myImage"); var errorText = document.getElementById("errorText"); img.style.display = "none"; errorText.style.display = "block"; }
<img>
元素和<p>
元素都分別加入了一個id
屬性,透過document.getElementById()
方法取得了它們的DOM 物件。
<p>當圖片載入失敗時,我們將 <img>
元素的 display
屬性設為 "none",也就是隱藏圖片。然後,將 <p>
元素的 display
屬性設為 "block",即顯示文字。這樣就可以在圖片載入失敗時,顯示自訂的文字資訊。
<p>在實際開發中,以上範例程式碼可以根據網頁的具體需求進行修改和擴展。我們可以根據實際情況,選擇合適的預設圖片或自訂文本,提供更好的使用者體驗。
<p>總結一下,利用 JavaScript 的 onerror
事件,在圖片載入失敗時實作替代顯示功能是常見的做法。透過合理的程式碼編寫,我們可以根據實際需求替換圖片、顯示文字或其他操作,提供更好的使用者提示。 以上是JavaScript 如何實現圖片載入失敗時的替代顯示功能?的詳細內容。更多資訊請關注PHP中文網其他相關文章!