使用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中文網其他相關文章！
