im trying to check if a image that is provided via a link is loaded or not. Here is how i currently check if its loaded or not:

$(`#${imgID}`)
    .on('error', function (err) {
        this.imageIsValid = false;
    })
    .on('load', function (res) {
        this.imageIsValid = true;
    });

I am loading a img element with a provided link and im listening for the two events 'error' and 'load' to check if the image is loaded. This does work for most of the images but not always. For example i have these two pictures:

Image one

Image two

Both these pictures trigger the 'load' event and are loaded on the page. But when i remove some part of the link the first image returns the 'error' event and the second one doesnt. The reason for this is, that the second link redirects to a empty image that is 16x9 px and therefore the 'load' event fires. The naturalHeight/naturalWidth and complete properties are also valid. For both images a 404 message gets logged in the console.

To check if the first request returns a bad response i then tried to check the img with a normal GET request. The problem here is that it works for the second image and but not for the first because now im getting cors errors. And if a request gets canceld by cors you cant get the response of the request.

So my question is: Is there another way to check if the image can be loaded or not.