使用jQuery和AJAX替换损坏的图片
本文扩展了之前关于检测和删除损坏图片的文章，深入探讨了如何使用jQuery和AJAX替换损坏的图片。大多数浏览器在找不到图片时会显示ALT标签。如果图片很小而ALT标签很长，这可能会成为问题，因为元素的输出宽度似乎不会被ALT标签的长度强制限制。因此，用默认图片替换损坏的图片是有意义的。
获取页面上当前图片的信息
$("img").each( function () {
console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});使用AJAX测试图片是否存在
$("img").each( function ()
{
$.ajax({
url:$(this).attr('src'),
type:'HEAD',
error:
function(){
//图片不存在
console.log('ERROR');
},
success:
function(){
//图片存在
console.log('success');
}
});
});
/*
输出：
success
success
ERROR
success
success
*/刷新图片
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存使用AJAX修复损坏的图片
请注意添加了_this和e.status。
$(".productBoxImage img").each( function ()
{
var _this = $(this);
$.ajax({
url:$(this).attr('src'),
type:'HEAD',
async: false,
error:
function(e)
{
if (e.status == '404') {
$(_this).attr('src',[replaceImageUrl]);
}
}
});
});非AJAX函数版本
/**
* 返回true表示图片损坏，false表示图片正常
* @param {jQuery} image 单个图片元素
* @return {Boolean}
*/
isImageBroken: function(image)
{
$image = $(image);
if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '')
{
return true;
}
return false;
},希望以上内容易于理解。如有疑问，请在评论区留言！:)
关于使用jQuery自动修复损坏图片的常见问题解答 (FAQs)
jQuery修复损坏图片的基本概念是使用error事件。当加载外部文件（例如图片）时发生错误时，会触发此事件。在图片的上下文中，我们可以使用此事件在原始图片加载失败时将图片的源（src属性）替换为默认图片或占位符图片。
error事件来修复损坏的图片？要在jQuery中使用error事件，需要选择图片，然后将error事件绑定到它们。在事件处理程序函数中，可以将图片的源更改为默认图片。这是一个基本示例：
$('img').error(function(){
$(this).attr('src', 'default.jpg');
});是的，您可以为每个损坏的图片使用特定的图片作为替换。您只需要修改error事件处理程序函数中的src属性即可。例如，如果要将损坏的图片替换为名为“specific.jpg”的图片，可以这样做：
$('img').error(function(){
$(this).attr('src', 'specific.jpg');
});是的，可以为每个损坏的图片使用不同的替换图片。您可以通过使用函数根据某些条件确定替换图片来实现此目的。例如，您可以使用图片的alt属性来确定替换图片。
alt属性来确定替换图片？您可以通过在error事件处理程序函数中访问alt属性来使用图片的alt属性来确定替换图片。这是一个示例：
$('img').error(function(){
var alt = $(this).attr('alt');
$(this).attr('src', alt + '.jpg');
});如果只想在替换图片也加载失败时才使用默认图片，可以在error事件处理程序函数中再次将error事件绑定到图片。这是一个示例：
$("img").each( function () {
console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});是的，您可以将此方法用于页面特定部分的损坏图片。您只需要修改选择器以选择该部分内的图片即可。例如，如果要修复id为“content”的div内的图片，可以这样做：
$("img").each( function ()
{
$.ajax({
url:$(this).attr('src'),
type:'HEAD',
error:
function(){
//图片不存在
console.log('ERROR');
},
success:
function(){
//图片存在
console.log('success');
}
});
});
/*
输出：
success
success
ERROR
success
success
*/是的，有一种方法可以知道图片是否已被替换。您可以在error事件处理程序函数中向图片添加一个类。然后，您可以使用此类来设置替换图片的样式或选择它们以进行进一步处理。这是一个示例：
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存是的，您可以使用此方法修复动态添加到页面的损坏图片。您只需要使用on方法而不是error方法来绑定error事件即可。此方法允许您将事件绑定到在设置事件处理程序后添加到页面的元素。这是一个示例：
$(".productBoxImage img").each( function ()
{
var _this = $(this);
$.ajax({
url:$(this).attr('src'),
type:'HEAD',
async: false,
error:
function(e)
{
if (e.status == '404') {
$(_this).attr('src',[replaceImageUrl]);
}
}
});
});如果除了替换图片之外，你还想在图片加载失败时执行其他操作，可以在error事件处理程序函数中添加该代码。例如，您可以将消息记录到控制台：
/**
* 返回true表示图片损坏，false表示图片正常
* @param {jQuery} image 单个图片元素
* @return {Boolean}
*/
isImageBroken: function(image)
{
$image = $(image);
if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '')
{
return true;
}
return false;
},
注意： 图片路径 /uploads/20250301/174079005067c2592224c8d.jpg 需要替换成实际的图片路径。 由于我无法访问本地文件系统，因此无法显示图片。
以上是使用jQuery使用Ajax替换破碎的图像的详细内容。更多信息请关注PHP中文网其他相关文章！
