数据结构
网络
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.com/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.com/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.com/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+ 阅读量
