Comment vérifier si une image existe sur un serveur avec JavaScript ?

Comment vérifier l'existence d'une image sur un serveur avec JavaScript

Vérifier si une ressource existe sur un serveur est crucial dans de nombreuses applications Web, telles que chargement dynamique des images. Voyons comment y parvenir à l'aide de JavaScript.

Problème :

Vous avez plusieurs images (par exemple, 1.jpg à 5.jpg) intégrées dans votre page HTML et souhaitez vérifier périodiquement si une image supplémentaire (par exemple, 6.jpg) est disponible sur le serveur. Pour y parvenir, vous devez appeler une fonction JavaScript toutes les minutes pour effectuer les vérifications suivantes :

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

Solution :

Pour vérifier si une image existe sur le serveur, vous pouvez utiliser le code JavaScript suivant :

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Explication :

Cet extrait de code utilise l'objet XMLHttpRequest pour envoyer une requête HTTP HEAD à l'image spécifiée URL. La requête HEAD renvoie le code d'état HTTP associé à la ressource, indiquant si elle existe. Un code d'état de 200 ou 304 indique que la ressource existe, tandis qu'un code d'état 404 signifie son absence.

Alternativement, vous pouvez utiliser une implémentation jQuery :

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

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

    })

Cette approche jQuery également effectue une requête HTTP GET et exécute les rappels spécifiés en fonction de la réponse du serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!