How to check status image javascript load

Question

I'm working on a new project and I'm taking pictures from differents website.

The problem is that when I take pictures, sometimes, I have a 404 error status. This is not a real problem if the link is broken because I remove these image from the DOM but some website replace the broken images by a default image (like here : http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large)

The only information is an error in my log like this : Failed to load resource: the server responded with a status of 404 (Not Found).

Is there anybody here who has a solution for me ?

There is my code for detecting broken images :

$('img').error(function(){
    $(this).hide().parents('a').parents('li').remove();
});

Thanks in advance !

First — you can substitute line with the `$(this).hide().parents('li').remove();` (`parents` bubbles up the tree), then — did I understand the question correctly: you want to remove not only 404 status pictures, but even "default images"? — fedosov, Jul 12 '12 at 20:21
Yes, this is correct. It works with the broken images but not with the defaults images (The idea is to show these images in a slideshow, we don't want to have default images in the slideshow.). Thanks for the parents, forgot about it. — Simon, Jul 12 '12 at 20:36
Provided example of an image also reply with the `HTTP/1.1 404 Not Found`. Is that correct or this is only coincidence? I just want to figure out — we must collect all this dummy images, as @Fresheyeball suggests, or just filter out 404? — fedosov, Jul 12 '12 at 20:41
It's correct! It was to show you the "default images" they are made from the same settings as the original images. Just filter the 404. I want to remove them from my DOM. — Simon, Jul 12 '12 at 20:45
@fedosov : Hey, sorry guys, I had other stuff to do in the office so I put that project on the side. I'm going to find and give you the answer asap. Have a nice day. — Simon, Jul 17 '12 at 07:24

score 2 · Answer 1 · edited May 23 '17 at 10:34

2

That is really tough. Here is the best solution I could think of.

Step one: Download all the 404 replacement images you will encounter from your various image sources. Convert these images to base64 strings and store those strings in an array in js.

Step two: Convert the downloaded image to a base64 string using a virtual canvas tag: How to convert image into base64 string using javascript

Step three: Loop through the 404 image base64 array and test if the downloaded image's base64 string matches any of the ones in the array. If it matches trigger 'error' on the image with jQuery, there by reusing your existing .error script.

edited May 23 '17 at 10:34

Community

1
1

answered Jul 12 '12 at 20:30

Fresheyeball

29,567
20
102
164

I wanted to do it but the problem is that the replacement images are made with the settings from the original image so every replacement images are different, sometimes you have a 83x83 with 10 bytes data and sometimes 1000x1000 with 1 mbytes data. I can't check if the images match because they are different for every error. This is a real nightmare ! The solution is to download all resolutions images but it's gonna take a while to see if string matches ! – Simon Jul 12 '12 at 20:41
You can blur both (sample and new downloaded) images and build hash out of several nodal points. Plus the fact that hash for sample image calculated only once in that case. – fedosov Jul 12 '12 at 20:45
@fedosov while I have NO idea how to go about doing that. It sounds like an awesome idea. Can you provide a link as to how you would go about it? – Fresheyeball Jul 12 '12 at 21:15
@Simon if you have the option of setting up a proxy that can catch 404's I would strongly advocate for fedosov's answer. – Fresheyeball Jul 12 '12 at 21:25

fedosov · Answer 2 · 2012-07-12T21:22:32.207

1

There is simplier (in comparison with provided) solution for your problem, but it requires some server-side code (explained in the end). Thus, the JS will look like this:

$("img").each(function()
{
    // Check each target image and try to resolve its src
    $.ajax(
    {
        url: $(this)[0].src,
        type: "get",
        context: $(this),
        error: function()
        {
            // Delete on error (404)
            $(this).remove();
            console.log("ERR!");
        },
        success: function(data)
        {
            // It's OK!
            console.log("YEAH!");
        }
    });
});

Because cross-domain requests is not allowed, you'll need to write simple proxy script, that passes image content throught your server.

For example: yoursite.com/imageproxy?src=http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large returns content of http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large image with original headers.

UPDATE:

As illustration to the comment on @Fresheyeball answer:

Colors comparison

UPDATE 2:

Also, I think you can try to use brain.js to train neural network, that help you later in comparison with colors. But...

Maybe it's easier to write 4 string proxy for images (if there is unlimited bandwidth, of course).

edited Jul 12 '12 at 21:22

answered Jul 12 '12 at 21:09

fedosov

1,989
15
26

Wouldn't the 404 replacement image still trigger success? – Fresheyeball Jul 12 '12 at 21:16
Yes. Thats the point of `$.ajax` call — it's triggers error on 404, no matter what on image. – fedosov Jul 12 '12 at 21:18
My point is that with the replacement image the server does not return 404, it returns the replacement image as if it was the correct image. – Fresheyeball Jul 12 '12 at 21:19
But there is 404 error in debug console, right? And `curl -I http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large` shows `HTTP/1.1 404 Not Found` – fedosov Jul 12 '12 at 21:23
1

In any case, we can develop a theme about beural networks and color sampling if it's worth it. – fedosov Jul 12 '12 at 21:24
I'm gonna try both solution and find wich one is the perfect one for me and post it tomorrow morning. Thanks you so much for the answers. Keep in touch with the solutions. – Simon Jul 12 '12 at 21:30

How to check status image javascript load

2 Answers2