資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 自動修復損壞的圖片？
在本教程中，我們將學習如何使用 jQuery 自動修復損壞的圖片。您是否曾在瀏覽任何網站時遇到過損壞的圖片，這些圖片只顯示備用文字和損壞圖片的預設圖示？您不認為這是一種糟糕的使用者體驗嗎？顯然是的。
因此，在開發應用程式或網站時，您應該編寫一些 JavaScript 或jQuery程式碼，以便它可以自動替換損壞的圖片。
在這裡，我們將學習 2 到 3 種使用 jQuery 自動修復損壞圖片的不同方法。
在 HTML ‘ <img> ’ 標籤內使用 ‘onerror’ 事件
我們可以將事件與 HTML 標籤一起使用。當 HTML 元素髮生任何錯誤時，‘onerror’ 事件就會觸發。在我們的案例中，如果圖片 URL 損壞，它將觸發 onerror 事件，我們可以為損壞的圖片設定一個新的 URL。
使用者應遵循以下語法，以使用 jQuery 中的 onerror 事件自動修復損壞的圖片。
語法
// image with the source URL
<imgsrc = "<Image URL>"onerror = "solveError(this);"/>
<script>
function solveError(currentImage) {
currentImage.src = "<New Image URL>";
}
</script>
在以上語法中，當圖片 URL 發生錯誤時，我們呼叫 ‘solveError()’ 函式。該函式將修復圖片的損壞 URL。
示例
在下面的示例中，我們使用 HTML ‘ <img> ’ 標籤建立了兩個圖片元素。兩個圖片元素都包含源 URL，但第二個圖片的源 URL 已損壞。此外，我們還為兩個圖片元素添加了 onerror 事件。
當 <img> 標籤內發生錯誤時，它將呼叫 ‘solveError()’ 函式，並且我們將當前元素的引用作為函式的引數傳遞。在 solveError() 函式內部，我們正在更改引數中接收到的引用圖片的 ‘src’ 屬性的值。
<html> <head> <style> img { width: 100px; height: 100px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body> <h2> Fixing the Broken image automatically using <i> jQuery each() method. </i> </h2> <img src = "https://tutorialspoint.tw/static/images/logo-footer-b.png" /> <img src = "https://wwwS/images/logo-footer-b.png" /> <script> $("img").each(function () { if ( (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == "uninitialized" ) { $(this).attr( "src", "https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj" ); } }); </script> </body> </html>
在以上輸出中，使用者可以看到第一個圖片是原始圖片，由於第二個圖片已損壞，因此它顯示了替換圖片。
使用 jQuery 的 .on() 方法自動修復損壞的圖片
我們可以為 jQuery 中的任何 HTML 元素呼叫 ‘.on()’ 方法。基本上，on() 方法用於檢測引用元素上的單個或多個事件。
使用者可以遵循以下語法，使用 on() 方法檢測圖片元素的錯誤。
語法
$("img").on("error", function () {
// code to change the URL of a broken image
$(this).attr("src","https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj"
);
});
我們在以上語法中的每個 ‘ <img> ’ 元素上都呼叫了 on() 方法。此外，當圖片發生錯誤時，我們還呼叫了回撥函式來替換損壞的圖片 URL。
引數
‘saveAs’ 函式接受兩個引數。
img − 它是一個選擇器。使用者可以保持原樣以修復所有損壞的圖片。此外，使用者可以設定需要為其觸發特定事件的圖片的 id 或類。
Error − 它是一個事件名稱。它將為選定的圖片檢測“error”。
function() { } − 當選定的圖片發生任何錯誤時，它是一個將執行的函式。
示例
在下面的示例中，建立了兩個圖片元素。一個帶有原始 URL，一個帶有損壞的圖片。
在 jQuery 中，我們使用了 on() 方法來檢測每個圖片上的錯誤，並在發生錯誤時呼叫回撥函式。回撥函式替換髮生錯誤的引用圖片的 URL。
<html> <head> <style> img { width: 100px; height: 100px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body> <h2> Fixing the Broken image automatically using <i> jQuery on() method. </i> </h2> <img src = "https://tutorialspoint.tw/static/images/logo-footer-b.png" /> <img src = "https://wwwS/images/logo-footer-b.png" /> <script> $("img").on("error", function () { $(this).attr( "src", "https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj" ); }); </script> </body> </html>
使用 jQuery 的 .each() 方法自動修復損壞的圖片
在這種方法中，我們使用了 jQuery 的 each() 方法來迭代所有選定的圖片。我們將檢查每個圖片的原始寬度。如果任何圖片的原始寬度為 0 或未定義，我們可以說圖片 URL 已損壞，我們可以替換它。
使用者應遵循以下語法，以迭代每個選定的圖片並檢查損壞的圖片 URL。
語法
// iterate through every image element
$("img").each(function () {
// check if the original width of the image is zero or undefined, then replace the image URL
if (
(typeof this.naturalWidth != "undefined" &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
){
$(this).attr("src","https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj");
}
});
在以上語法中，我們根據其值檢查圖片的自然寬度的型別、自然寬度本身以及圖片的準備狀態，替換損壞的圖片 URL。
屬性
typeof − 它返回變數或任何屬性的型別。
naturalWidth − 它返回圖片的原始寬度。即使使用者更改了圖片的寬度，它也會返回原始寬度。
readyState − 根據圖片是否已載入到文件中，它返回布林值。
示例
以下示例演示瞭如何透過使用 jQuery 的 each() 方法迭代每個圖片來自動修復損壞的圖片。它簡單地使用 jQuery 的 attr() 方法替換每個損壞圖片的 ‘src’ 屬性的值。
<html> <head> <style> img { width: 100px; height: 100px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> </head> <body> <h2> Fixing the Broken image automatically using <i> jQuery each() method. </i> </h2> <img src = "https://tutorialspoint.tw/static/images/logo-footer-b.png" /> <img src = "https://wwwS/images/logo-footer-b.png" /> <script> $("img").each(function () { if ( (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == "uninitialized" ) { $(this).attr( "src", "https://yt3.ggpht.com/ytc/AMLnZu8XtlipNIpeKZgTSg1z64NO-mF7FEmlC2qML8WvwA=s900-c-k-c0x00ffffff-no-rj" ); } }); </script> </body> </html>
在本教程中，我們學習了三種使用 jQuery 替換損壞圖片的不同方法。此外，使用者還可以使用 hide() 方法在 jQuery 中隱藏損壞的圖片。
建議使用第一種方法，因為它是最簡單的方法，使用者可以根據需要使用其他方法。
2K+ 閱讀量
