How To Replace Nonexistent Images With A Placeholder In Asynchronous Loading From Database

I have a database with images that i need to load on-the-fly per user's request. The images would go as background images of separate s in an encompassing div container... somethi

Solution 1:

It seems i could not get away from having to create another DOM elem. Here is what i am now using:

<divstyle="background:url(providerSrc)"><imgstyle="display:none"src="providerSrc"onerror="this.parentNode.style.backgroundImage='url(fallbackSrc)'"  
   /></div>

This is taken from: http://www.daveoncode.com/2010/08/20/image-background-fallback-img-tag-error-handlers/

If you know of 'better' solution please reply

Solution 2:

What if you put the placeholder as background image behind the original image? If the image exists, it will cover the placeholder. If not, then nothing covers the placeholder and it will be visible.