0

With reference to this issue: jQuery/JavaScript to replace broken images

I still get exceptions like this in chrome console, even when when the images are being correctly repalced using the suggestions from the linked solution above:

GET http://10.10.0.3/OC/media/profile-pics/2348022002298.jpg 404 (Not Found)

I'm an building up a large address book where images are saved by mobile number. there would potentially be 1000's of 404 errors.

Would that be a performance issues - 1000's of failed image download attempts?

IS there a more efficient solution to that suggested in the link?

My best alternative so far seems to build this up server-side and do a file replace ahead of time for files i cant find.

Suggestions please, thanks.

Community
  • 1
  • 1
Charles Okwuagwu
  • 10,538
  • 16
  • 87
  • 157
  • Why is it annoying for you? – Parag Bhayani Jun 04 '15 at 07:20
  • @ParagBhayani see my updated question. I wonder if potentially 1000s of 404 errors would become a performance issue – Charles Okwuagwu Jun 04 '15 at 07:22
  • 2
    *1000's of 404 errors* - yikes. Performance wise? It's easier to find out an image isn't there than to actually download and display it, so your page will actually load quicker with all those 404s. Question you have to ask is: Why are you displaying 1000s of images in one go? – CodingIntrigue Jun 04 '15 at 07:23
  • @RGraham and address book list even loaded in parts... still could have 1000s of missing images – Charles Okwuagwu Jun 04 '15 at 07:25
  • I agree with @RGraham If you web page is not loading with 1000s of image than it is wrong, and very few image won't actually increase loading time... You can use CSS-sprites to reduce number of files... – Parag Bhayani Jun 04 '15 at 07:26
  • @ParagBhayani each image is mobile-number.jpg i cant do that with sprites ahead of time – Charles Okwuagwu Jun 04 '15 at 07:27
  • Ohhh, at the moment I don't have any thing in my mind how to handle exception for image, You could do one thing, you should have saved info in your database related to availability of image – Parag Bhayani Jun 04 '15 at 07:30
  • @CharlesO You certainly *could*, but the resulting sprite would be huge. And while it's loading you wouldn't see any of the users' profiles. As you say, you *could* do this server-side, but there's a trade-off there: you've got to do some serious dev work for that - is that worth an extra 15ms on the client-side to execute the `onerror` handler? I would doubt it – CodingIntrigue Jun 04 '15 at 07:30
  • @RGraham 1000 * 15ms per missing image??? – Charles Okwuagwu Jun 04 '15 at 07:31
  • @CharlesO That's a gross exaggeration. Think about just how quickly your JS executes. It's more likely going to be 15ms in total for all 1000 images. But don't take that as gospel, what I really mean is *very fast* :) – CodingIntrigue Jun 04 '15 at 07:33
  • 1
    @ParagBhayani your suggestion looks reasonable; add a hasImage field, was just hoping the web infrastructure could gracefully handle those cases without us having to code it in – Charles Okwuagwu Jun 04 '15 at 07:35

1 Answers1

3

Because the http requests still fail.

After they fail you use the replacement, but it's not like preventing an exception to throw up.

To further explain, using @RGraham's comment below:

the console shows errors of many types. Among which

  • Javascript exception, unless handled.
  • Network requests which return with error status(4xx,5xx).

The latter is your case. After this happens, you have a solution, but they do go and fail.

JNF
  • 3,696
  • 3
  • 31
  • 64
  • this is different from exception being thrown and handled in JavaScript? – Charles Okwuagwu Jun 04 '15 at 07:13
  • 1
    @CharlesO There is no *exception* here, just a network error. You'd get the same error if loading an asset without any javascript – CodingIntrigue Jun 04 '15 at 07:15
  • Yes. an exception thrown in .js reaches the console when it flies all the way up the chain and results in something getting stuck. If caught, the handling code is executed instead and there is no notification of the error. – JNF Jun 04 '15 at 07:15
  • @RGraham Noted. Please see my updated question. When there are potentially 1000s of missing images would this not become an issue? how best to resolve it then? – Charles Okwuagwu Jun 04 '15 at 07:24
  • @CharlesO I replied to that in the main comments, but that really is a separate question. You should choose an answer here and ask a separate question for that - assuming that it's on topic. – CodingIntrigue Jun 04 '15 at 07:25
  • @RGraham thanks for the answers, to the initial question. i guess the annoyance of seeing several 404 was what led me to post this question. The bigger issues is - I cannot predict or control which user will post his/her profile image against a mobile number - so there WILL be several 404, i thought the onError handler would kick this - but obviously a Network error is a Network error, i guess i need a nother solution. – Charles Okwuagwu Jun 04 '15 at 07:30
  • @JNF further to your explanation, let's assume i am setting the image source via javascript, then i potentially can trap even 404 (Network) exceptions and do a replace. Will this not Qualify as a "Handled exception", and hence SHOULD NOT bubble up into chrome? – Charles Okwuagwu Jun 04 '15 at 07:42
  • 1
    @CharlesO, depends how you do it. If you just set it, then no, it's still a network issue, and the script executed fine. If you make an ajax call to test the url, or something similar, it might be caught. – JNF Jun 07 '15 at 09:04
  • @CharlesO, once you make the request for the image there is nothing you can do to prevent it from showing up as a 404 in the developer console. This doesn't indicate an error, it simply indicates that the browser requested a resource and the server indicated that it was not found. The referenced code is allowing you to request another image in its place, but does not prevent the dev console from showing you the original request. – Prestaul Jun 09 '15 at 21:16