Fade image onload but not for cache

Question

I want to fade-in images on my page when they load, but if this image is not already in cache - just show it normally. I've tried inline html

<img onload="$(this).show(500)" />

and css img{display:none}, but it fires even if this image is already in cache. How do I fade-in only images, which are not in cache?

Answer 1

This should work in all relevant browsers.

On domready, the cached image will be complete already, thus the onload handler is not set.

$('img.fadeuncached').each(function() {
    if(!this.complete) {
        var $el = $(this);
        $el.load(function() { $el.fadeIn(500); });
    }
});