Wie überprüfe ich mit JavaScript, ob ein Bild auf einem Server vorhanden ist?

So überprüfen Sie das Vorhandensein von Bildern auf einem Server mit JavaScript

Die Überprüfung, ob eine Ressource auf einem Server vorhanden ist, ist in vielen Webanwendungen von entscheidender Bedeutung, z Bilder dynamisch laden. Lassen Sie uns untersuchen, wie Sie dies mit JavaScript erreichen können.

Problem:

Sie haben mehrere Bilder (z. B. 1.jpg bis 5.jpg) in Ihre HTML-Seite eingebettet und Sie möchten regelmäßig prüfen, ob ein zusätzliches Bild (z. B. 6.jpg) auf dem Server verfügbar ist. Um dies zu erreichen, müssen Sie jede Minute eine JavaScript-Funktion aufrufen, um die folgenden Prüfungen durchzuführen:

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

Lösung:

Um zu prüfen, ob ein Bild vorhanden ist Server können Sie das folgende JavaScript verwenden Code:

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}

Erklärung:

Dieses Code-Snippet verwendet das XMLHttpRequest-Objekt, um eine HTTP-HEAD-Anfrage an die angegebene Bild-URL zu senden. Die HEAD-Anfrage gibt den mit der Ressource verknüpften HTTP-Statuscode zurück, der angibt, ob sie vorhanden ist. Ein Statuscode von 200 oder 304 zeigt an, dass die Ressource vorhanden ist, während ein Statuscode 404 ihre Abwesenheit anzeigt.

Alternativ können Sie eine jQuery-Implementierung verwenden:

$.get(image_url)
    .done(function() { 
        // Do something now you know the image exists.

    }).fail(function() { 
        // Image doesn't exist - do something else.

    })

Dieser jQuery-Ansatz ebenfalls führt eine HTTP-GET-Anfrage durch und führt die angegebenen Rückrufe basierend auf der Antwort des Servers aus.

Das obige ist der detaillierte Inhalt vonWie überprüfe ich mit JavaScript, ob ein Bild auf einem Server vorhanden ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!