Utilisez jQuery pour remplacer les images cassées à l'aide de Ajax

Remplacez les images endommagées par jQuery et Ajax

Cet article étend les articles précédents sur la détection et la suppression des images corrompues et explore en profondeur comment remplacer les images corrompues par jQuery et Ajax. La plupart des navigateurs affichent des balises ALT lorsque l'image n'est pas trouvée. Cela peut devenir un problème si l'image est petite et que la balise ALT est longue, car la largeur de sortie de l'élément ne semble pas être forcé d'être limitée par la longueur de la balise ALT. Par conséquent, il est logique de remplacer les images endommagées par des images par défaut.

Obtenez des informations sur l'image actuelle sur la page

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

Utilisez Ajax pour tester si l'image existe

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

Rafraîchissez l'image

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

Utilisez Ajax pour réparer les images endommagées

Veuillez noter que _this et e.status sont ajoutés.

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

Version de la fonction non 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;
},

J'espère que ce qui précède est facile à comprendre. Si vous avez des questions, veuillez laisser un message dans la zone de commentaires! :)

FAQ (FAQ) sur l'utilisation de jQuery pour réparer automatiquement les images endommagées

Quel est le concept de base de la réparation des images endommagées par JQuery?

Le concept de base de la réparation des images endommagées par jQuery est d'utiliser des événements error. Cet événement est déclenché lorsqu'une erreur se produit lors du chargement d'un fichier externe (comme une image). Dans le contexte de l'image, nous pouvons utiliser cet événement pour remplacer la source de l'image (src Attribut) par l'image ou l'image par défaut de l'image par défaut lorsque l'image d'origine ne se charge pas.

Comment utiliser l'événement error dans jQuery pour corriger les images corrompues?

Pour utiliser des événements error dans jQuery, vous devez sélectionner des images et leur lier error des événements. Dans la fonction d'événements de gestionnaire, vous pouvez modifier la source de l'image par l'image par défaut. Voici un exemple de base:

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

Puis-je utiliser une image spécifique en remplacement de chaque image endommagée?

Oui, vous pouvez utiliser une image spécifique en remplacement de chaque image endommagée. Il vous suffit de modifier l'attribut error dans la fonction de gestionnaire d'événements src. Par exemple, si vous souhaitez remplacer l'image endommagée par une image nommée "spécifique.jpg", vous pouvez le faire:

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

est-il possible d'utiliser une image de remplacement différente pour chaque image endommagée?

Oui, vous pouvez utiliser une image de remplacement différente pour chaque image endommagée. Vous pouvez le faire en utilisant des fonctions pour déterminer l'image de remplacement en fonction de certaines conditions. Par exemple, vous pouvez utiliser l'attribut alt de l'image pour déterminer l'image de remplacement.

Comment utiliser l'attribut alt de l'image pour déterminer l'image de remplacement?

Vous pouvez déterminer l'image de remplacement en accédant à l'attribut error dans la fonction de gestionnaire d'événements alt pour utiliser l'attribut alt de l'image. Voici un exemple:

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

Et si je veux utiliser l'image par défaut uniquement lorsque l'image de remplacement ne se charge pas?

Si vous souhaitez utiliser l'image par défaut que lorsque l'image de remplacement ne parvient pas non plus, vous pouvez lier à nouveau l'événement error à l'image dans la fonction error d'événements. Voici un exemple:

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

Puis-je utiliser cette méthode pour les images corrompues dans des parties spécifiques de la page?

Oui, vous pouvez utiliser cette méthode pour les images corrompues dans des parties spécifiques de la page. Il vous suffit de modifier le sélecteur pour sélectionner les images de cette section. Par exemple, si vous souhaitez réparer une image à l'intérieur d'un div avec "Contenu", vous pouvez le faire:

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

Existe-t-il un moyen de savoir si l'image a été remplacée?

Oui, il existe un moyen de savoir si l'image a été remplacée. Vous pouvez ajouter une classe à l'image dans la fonction de gestionnaire d'événements error. Vous pouvez ensuite utiliser cette classe pour styliser les images de remplacement ou les sélectionner pour un traitement ultérieur. Voici un exemple:

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

Puis-je utiliser cette méthode pour corriger les images endommagées qui sont ajoutées dynamiquement à la page?

Oui, vous pouvez utiliser cette méthode pour corriger les images endommagées qui sont ajoutées dynamiquement à la page. Il vous suffit d'utiliser la méthode on au lieu de la méthode error pour lier l'événement error. Cette méthode vous permet de lier les événements aux éléments ajoutés à la page après la configuration du gestionnaire d'événements. Voici un exemple:

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

Et si je veux faire d'autres opérations lorsque l'image ne se charge pas, en plus de remplacer l'image?

Si vous souhaitez effectuer d'autres opérations lorsque l'image ne se charge pas, vous pouvez ajouter le code dans la fonction de gestionnaire d'événements error. Par exemple, vous pouvez enregistrer des messages à la console:

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

Remarque: Chemin d'image /uploads/20250301/174079005067c2592224c8d.jpg doit être remplacé par le chemin d'image réel. Comme je ne peux pas accéder au système de fichiers local, l'image ne peut pas être affichée.

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!