1

Does anyone know a lightweight way to validate if an image URL exists or not?

I have a list of images (some are 404's) that I'm feeding to my jquery image viewer plugin (or any other javascript lightbox plugin for that matter) which doesn't deal well with 404 image URLs.

I know you can use the onerror event available on the html img element, which is probably the most efficient and I've used before for other image viewer plugins that require the use of the <img> tag, but not all the plugin's use that tag (inlcuding my current one), so I'm left wondering how to validate the URLs so the plugin doesn't choke on them?

I suppose I could create an <img> element, set display:none, set each image one-at-a-time, and find out if it's valid by checking the onerror event, but that seems inefficient. Any other easier way? You'd think some fundamental behavior of these plugins would be to check for that, but I haven't found one yet that does and meets my criteria.

johntrepreneur
  • 4,514
  • 6
  • 39
  • 52
  • 1
    Aren't you able to simply check each one for 404 before feeding it to your JQuery viewer? I don't suppose it gets anymore efficient than that. – Volatile Jul 14 '13 at 00:51
  • @Volatile - won't that download all of the valid images twice? ...once for the image viewer and once for the hidden `` tag? I can have up to 25 image URLs so that's not ideal. – johntrepreneur Jul 14 '13 at 00:58
  • @Volatile - when I've used `onerror` in the past to filter them out, it's just been to remove the `` element if it returns an error and then tweaked the image viewer plugin to deal with shuffled list. – johntrepreneur Jul 14 '13 at 01:02
  • How are you feeding them to the image viewer? Are you feeding it an array of strings containing the URLs? – Volatile Jul 14 '13 at 01:05
  • 1
    These links might help: [**AJAX/jQuery**](http://msdn.microsoft.com/en-us/library/windows/desktop/ms757006(v=vs.85).aspx) and [**JavaScript**](http://stackoverflow.com/questions/220231/accessing-http-headers-in-javascript) – Volatile Jul 14 '13 at 01:14
  • @Volatile - I'm assembling the javascript with the list of image URLs for the jquery image viewer plugin on the server side, so I could validate them on the server, but that's definitely not ideal or scalable. This particular plugin is configured to take them as attributes of anchor using `href` and `rel`. – johntrepreneur Jul 14 '13 at 01:24
  • 1
    Well, from what I can understand you either have to "add" functionality to the plugin so that it will validate whether or not an URL returns 404 before storing it. Or you have to simply make the javascript, that feeds the plugin, validate whether or not they are valid before giving them to the plugin. – Volatile Jul 14 '13 at 01:34
  • 1
    @jszobody has a good point in using HEAD if you want to keep it very efficient. By sending an HTTP HEAD request, it will not download the image data... Only the meta-data (reponse headers). – Volatile Jul 14 '13 at 01:35
  • @Volatile - good point about tweaking the plugin code or validating the links before passing them in. Only way to validate those image URLs located (on another domain) on the client would be thru use of `` since anything else is a security violation. You made me think about the double download though, which it's not, since the browser will likely cache it the first time. – johntrepreneur Jul 14 '13 at 02:05
  • @Volatile - At this point, I think tweaking the minified plugin code would take longer (assuming they use `` inside it which I didn't see on initial scan). I'll probably opt for using the hidden `` tag to validate before passing them into the plugin instead since it's the most performant and quicker solution. Funny, cause that was your original comment :-) – johntrepreneur Jul 14 '13 at 02:05

2 Answers2

1

Make a HEAD Ajax request

Are your images hosted on the same domain? If so, you could make an Ajax type "HEAD" request to see if it is a 404, without retrieving the contents of the image itself. This should make your initial check quite fast and efficient. See this thread for an example that I think is somewhat similar to what you are looking to accomplish:

Ajax HEAD request via Javascript/jQuery

Do it server side

If your images are not on the same domain, or you need to support older browsers that may not be able to do HEAD Ajax requests, I'd be tempted to verify your URLs server side. Do this before the page loads, or if you can't, make an Ajax call to your own server side script. The server side script can get the headers for each URL (again without pulling the image data itself) and tell you which ones are valid.

Community
  • 1
  • 1
jszobody
  • 28,495
  • 6
  • 61
  • 72
  • @ jszobody - They are on a different domain so doing a HEAD request in the javascript won't work which is why the `` element is so tempting. I suppose I could do it server side if it's just a lightweight HEAD request. Seems like either server side `HEAD` requests or client side `` are my only two options. – johntrepreneur Jul 14 '13 at 01:32
  • I would agree that those seem to be the two most likely solutions. Neither is ideal, but I guess that tells you why other plugins aren't doing this already. =) What server technology do you have available? If PHP I could help put that together if you need. – jszobody Jul 14 '13 at 01:36
  • @ jszobody - thanks for the offer, but that's okay. I'm just trying to decide if I really want to have the user's page request wait while the server verifies up to 25 images on another domain. Just not ideal I think. Probably best option, is to try to tweak the minified plugin code (assuming it uses `` already, or add the extra tag `. And now that I think about it, the browser woudn't download the image twice, but use the cache instead on the second attempt (I assume). Right? – johntrepreneur Jul 14 '13 at 01:57
  • 1
    Yeah I would assume the same. Two image tags should only load the image once. – jszobody Jul 14 '13 at 02:37
0

I ended up going with @Volatile's solution (from the comments under the question) and adding the images to hidden img tags and then using the imagesLoaded plugin on that group of hidden img tags to filter only the ones that loaded successfully. Then the image viewer plugin was happy with the non-404 images and just retrieved them from the browser cache.

johntrepreneur
  • 4,514
  • 6
  • 39
  • 52