Verwenden Sie JQuery, um defekte Bilder mit AJAX zu ersetzen

Ersetzen Sie beschädigte Bilder durch JQuery und Ajax

Dieser Artikel erweitert frühere Artikel über das Erkennen und Löschen von beschädigten Bildern und untersucht eingehend, wie beschädigte Bilder durch JQuery und Ajax ersetzt werden. Die meisten Browser zeigen Alt -Tags an, wenn das Bild nicht gefunden wird. Dies kann zu einem Problem werden, wenn das Bild klein ist und das ALT -Tag lang ist, da die Ausgangsbreite des Elements nicht gezwungen zu sein scheint, durch die Länge des ALT -Tags begrenzt zu sein. Daher ist es sinnvoll, beschädigte Bilder durch Standardbilder zu ersetzen.

Informationen zum aktuellen Bild auf der Seite

erhalten

$("img").each( function () {
    console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});

Verwenden Sie AJAX, um zu testen, ob das Bild

vorhanden ist

$("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
*/

Aktualisieren Sie das Bild

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存

Verwenden Sie AJAX, um beschädigte Bilder zu reparieren

Bitte beachten Sie, dass _this und e.status hinzugefügt werden.

$(".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]);
                }
            }
    });
});

Nicht-Ajax-Funktion Version

/**
 * 返回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;
},

Ich hoffe, das oben obene ist leicht zu verstehen. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich! :)

FAQs (FAQs) bei Verwendung von JQuery, um beschädigte Bilder automatisch zu reparieren

Was ist das grundlegende Konzept der Reparatur von Jquery, die beschädigte Bilder reparieren?

Das grundlegende Konzept der Reparatur von JQuery -Reparaturen beschädigter Bilder besteht darin, error Ereignisse zu verwenden. Dieses Ereignis wird ausgelöst, wenn beim Laden einer externen Datei (z. B. ein Bild) ein Fehler auftritt. Im Kontext des Bildes können wir mit diesem Ereignis die Quelle des Bildes (src Attribut) durch das Standardbild oder das Platzhalterbild ersetzen, wenn das Originalbild nicht geladen wird.

Wie kann ich das Ereignis in jQuery verwenden, um beschädigte Bilder zu beheben? error

Um

Ereignisse in JQuery zu verwenden, müssen Sie Bilder auswählen und error Ereignisse an sie binden. In der Veranstaltungs -Handler -Funktion können Sie die Quelle des Bildes in das Standardbild ändern. Hier ist ein grundlegendes Beispiel: error

$('img').error(function(){
  $(this).attr('src', 'default.jpg');
});

Kann ich ein bestimmtes Bild als Ersatz für jedes beschädigte Bild verwenden?

Ja, Sie können ein bestimmtes Bild als Ersatz für jedes beschädigte Bild verwenden. Sie müssen das

-Merkmal in der Ereignishandlerfunktion nur ändern. Wenn Sie beispielsweise das beschädigte Bild durch ein Bild namens "spezifisch.jpg" ersetzen möchten, können Sie dies tun: error src

Ist es möglich, für jedes beschädigte Bild ein anderes Ersatzbild zu verwenden?

$('img').error(function(){
  $(this).attr('src', 'specific.jpg');
});

Ja, Sie können für jedes beschädigte Bild ein anderes Ersatzbild verwenden. Sie können dies tun, indem Sie Funktionen verwenden, um das Ersatzbild basierend auf bestimmten Bedingungen zu bestimmen. Sie können beispielsweise das Attribut

des Bildes verwenden, um das Ersatzbild zu bestimmen.

alt Wie verwendet ich das Attribut des Bildes, um das Ersatzbild zu bestimmen?

Sie können das Ersatzbild bestimmen, indem Sie auf das Attribut alt in der Funktion

Ereignishandler zugreifen, um das Attribut

des Bildes zu verwenden. Hier ist ein Beispiel: error alt alt Was ist, wenn ich das Standardbild nur dann verwenden möchte, wenn das Ersatzbild nicht geladen wird?

$('img').error(function(){
  var alt = $(this).attr('alt');
  $(this).attr('src', alt + '.jpg');
});

Wenn Sie das Standardbild nur dann verwenden möchten, wenn das Ersatzbild auch nicht geladen wird, können Sie das Ereignis

in der Funktion

Ereignishandler erneut an das Bild binden. Hier ist ein Beispiel:

$("img").each( function () {
    console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});

Kann ich diese Methode für beschädigte Bilder in bestimmten Teilen der Seite verwenden?

Ja, Sie können diese Methode für beschädigte Bilder in bestimmten Teilen der Seite verwenden. Sie müssen nur den Selektor ändern, um die Bilder in diesem Abschnitt auszuwählen. Wenn Sie beispielsweise ein Bild in einem DIV mit ID "Inhalt" beheben möchten, können Sie dies tun:

$("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
*/

Gibt es eine Möglichkeit zu wissen, ob das Bild ersetzt wurde?

Ja, es gibt eine Möglichkeit zu wissen, ob das Bild ersetzt wurde. Sie können dem Bild in der Ereignishandlerfunktion eine Klasse hinzufügen. Sie können diese Klasse dann verwenden, um die Ersatzbilder zu stylen oder sie zur weiteren Verarbeitung auszuwählen. Hier ist ein Beispiel: error

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存

Kann ich diese Methode verwenden, um beschädigte Bilder zu beheben, die der Seite dynamisch hinzugefügt werden?

Ja, Sie können diese Methode verwenden, um beschädigte Bilder zu beheben, die der Seite dynamisch hinzugefügt werden. Sie müssen nur die

-Methode anstelle der on -Methode verwenden, um das Ereignis error zu binden. Mit dieser Methode können Sie Ereignisse an Elemente binden, die der Seite nach dem Einrichten des Ereignishandlers hinzugefügt wurden. Hier ist ein Beispiel: 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]);
                }
            }
    });
});

Was ist, wenn ich andere Operationen ausführen möchte, wenn das Bild nicht lädt, abgesehen davon, dass das Bild ersetzt wird?

Wenn Sie andere Vorgänge ausführen möchten, wenn das Bild nicht geladen wird, können Sie den Code in der Funktion "Ereignishandler" hinzufügen. Zum Beispiel können Sie Nachrichten an der Konsole protokollieren:

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;
},

Hinweis: Bildpfad

muss durch den tatsächlichen Bildpfad ersetzt werden. Da ich nicht auf das lokale Dateisystem zugreifen kann, kann das Bild nicht angezeigt werden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um defekte Bilder mit AJAX zu ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!