1

I found this question : jQuery/JavaScript to replace broken images its works great for img tag, but when I try to use it for picture tag, its doesn't work.

first I try to catch th source failed:

    $('picture source').on('error', function () {
        loadBackupImage($('picture source').first());
    });

and the error didn't fired.

then I try to get the error on the alternate img tag. but I can't get the specific source - srcset attribute.

also, when I change the img.src. it's still return error on the browser. even so I see that's the img.src is correct.

thanks!!

Gooloosh
  • 131
  • 1
  • 11

1 Answers1

2

I found the way: the tag picture fired onerror as img, and the img has siblings - source.

$("img").on('error', function () {
    $(this).siblings("source").attr("srcset","mybackup.jpg")
});

one more complicatted: I stored the differnce image for each source in attribute data-image, and displays the correct backup image

$("img").on('error', function () {
    var image = $(this).siblings("source").attr("data-image");
    $(this).siblings("source").attr("srcset",image);
});

hope you will find its helpfull.

Gooloosh
  • 131
  • 1
  • 11