The difficulties of detecting missing images with flickr and javascript. 46

Posted by Jason Yanowitz Thu, 17 Aug 2006 19:18:00 GMT

So, we put up a new website, slideshowr for viewing your flickr slideshows. There are a number of things I don’t like about the existing flickr slideshows, in particular, the lack of photo titles, the size of the photos, and the lack of music. So we fixed all that. The resolution I most often want to view my photos in is “large”. Flickr only makes “large” photos if the resolution exceeds certain limits. The only way to find this out ahead of time (via the api) is to request the size info for every photo. That can take awhile.

So, I thought, why not try to load the photo and if that fails, rewrite the URL so we grab the original sized one. Well, that would be all well and good, EXCEPT that there is no way to get at the HTTP return code in Javascript (to see a 302 redirect) nor does the Image object get updated with the actual src used to load the image (in the instance of a redirect to http://www.flickr.com/images/photo_unavailable.gif).

The solution? The Image object does get the height and width of the photo_unavailable gif (375×500) and we can look for that, that the src ended in _b.jpg, and then try to get _o.jpg instead. The nice thing is that a flickr “large” image will never be 375×500, so this will Just Work (until they change the dimensions of their unavailable gif)

Kludgey, but it works. Sometimes the corner case limitations of javascript amaze me.