A little while ago, I was working on a project that needed to display user pictures. These pictures were to be stored in a Picture Library specific to the site collection of the application in SharePoint 2010. If the user didn’t have a picture, for whatever reason, a default silhouette picture was to be displayed instead.
The easiest way to implement this is by using the onError handler that the Document Object Model (DOM) provides for image tags as part of the HTML specification. Whenever an image fails to load, the onError handler gets fired, if there is one. This is the perfect place to display an alternate image source file.
Anyway, SharePoint 2010 provides functionality built into its Picture Library to display thumbnails of pictures stored in the library. These thumbnails are created when the picture is accessed and are cached to speed up subsequent accesses.
The way SharePoint handles thumbnails for pictures that don’t exist in the library does not jive well with the way Firefox determines if a picture does not exist. SharePoint does not return a 404 Not Found exception when accessing a thumbnail page that doesn’t exist because it’s trying to generate the thumbnail in the background and instead returns an empty picture. Firefox receives this empty picture and treats it like a successful call.
The end result is that Firefox doesn’t fire the onError handler for that particular image, even though no image has actually been returned. How can we prevent such a situation from happening?
Override onLoad Handler
The onLoad handler fires when the image is “successfully” loaded by the browser. Once here, you need to check the image size to make sure that it’s not 0 x 0. If it is 0 x 0, you’ll want to fire the onError handler to avoid duplicating code. I’m assuming that you’re using jQuery. If you’re not, the functionality is similar but not identical.
You can also use the Client Object Model to determine if the object exists in the library and act accordingly. Once again, I’ll be assuming you have jQuery
This is more complicated and slower, but is guaranteed to give you the correct result. Only if you can get the element back from the picture library in question will you use the thumbnail. You’ll be showing the silhouette if there are any issues.
I have no personal preference in the matter, except that you might find it more difficult to work with the SharePoint Object Model and jQuery at the same time.