Use jQuery to Replace Broken Images using AJAX

Replace damaged pictures with jQuery and AJAX

This article extends previous articles on detecting and deleting corrupted images, and explores in-depth how to replace corrupted images with jQuery and AJAX. Most browsers display ALT tags when the image is not found. This can become a problem if the image is small and the ALT tag is long, as the output width of the element does not seem to be forced to be limited by the length of the ALT tag. Therefore, it makes sense to replace damaged images with default images.

Get information about the current picture on the page

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

Use AJAX to test whether the image exists

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

Refresh the picture

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

Use AJAX to repair damaged pictures

Please note that _this and e.status are added.

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

Non-AJAX function 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;
},

I hope the above is easy to understand. If you have any questions, please leave a message in the comment area! :)

FAQs (FAQs) on using jQuery to automatically repair damaged images

What is the basic concept of jQuery repairing damaged pictures?

The basic concept of jQuery repairing damaged images is to use error events. This event is triggered when an error occurs while loading an external file (such as a picture). In the context of the image, we can use this event to replace the image's source (src attribute) with the default image or placeholder image when the original image fails to load.

How to use the error event in jQuery to fix corrupted images?

To use error events in jQuery, you need to select images and bind error events to them. In the event handler function, you can change the source of the image to the default image. Here is a basic example:

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

Can I use a specific image as a replacement for each damaged image?

Yes, you can use a specific image as a replacement for each damaged image. You only need to modify the error attribute in the src event handler function. For example, if you want to replace the damaged image with an image named "specific.jpg", you can do this:

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

Is it possible to use a different replacement image for each damaged image?

Yes, you can use a different replacement image for each damaged image. You can do this by using functions to determine the replacement image based on certain conditions. For example, you can use the alt attribute of the image to determine the replacement image.

How to use the alt attribute of the image to determine the replacement image?

You can determine the replacement image by accessing the error attribute in the alt event handler function to use the alt attribute of the image. Here is an example:

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

What if I want to use the default image only when the replacement image fails to load?

If you only want to use the default image when the replacement image also fails to load, you can bind the error event to the image again in the error event handler function. Here is an example:

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

Can I use this method for corrupted images in specific parts of the page?

Yes, you can use this method for corrupted images in specific parts of the page. You just need to modify the selector to select the pictures in that section. For example, if you want to fix an image inside a div with id "content", you can do this:

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

Is there any way to know if the image has been replaced?

Yes, there is a way to know if the image has been replaced. You can add a class to the image in the error event handler function. You can then use this class to style the replacement images or select them for further processing. Here is an example:

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

Can I use this method to fix damaged images that are dynamically added to the page?

Yes, you can use this method to fix damaged images that are dynamically added to the page. You just need to use the on method instead of the error method to bind the error event. This method allows you to bind events to elements added to the page after setting up the event handler. Here is an example:

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

What if I want to do other operations when the image fails to load, besides replacing the image?

If you want to perform other operations when the image fails to load, you can add the code in the error event handler function. For example, you can log messages to the 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;
},

Note: Image path /uploads/20250301/174079005067c2592224c8d.jpg Need to be replaced with the actual image path. Since I can't access the local file system, the picture cannot be displayed.

The above is the detailed content of Use jQuery to Replace Broken Images using AJAX. For more information, please follow other related articles on the PHP Chinese website!