jquery.replaceImageSrc.js

(function($) {
    /*
     * Replace image source by fading out, preloading and fading in
     * usage: $('img').replaceImageSrc('http://example.com/kitten.jpg');
     */
    $.fn.replaceImageSrc = function(newUrl, options) {
        var settings = $.extend({
            duration: 'slow'
        }, options);

        var imgPreload = new Image();
        imgPreload.src = newUrl;

        return this.each(function() {
            var $imgArea = $(this);

            $imgArea.fadeOut({
                duration: settings.duration,
                complete: function() {
                    var finishLoad = function() {
                        $imgArea.attr('src', newUrl);
                        $imgArea.fadeIn(settings.duration);
                    };
                    if (!imgPreload.complete && !imgPreload.readyState === 4) {
                        $(imgPreload).one('load', function(){
                            finishLoad();
                        });
                    } else {
                        finishLoad();
                    }
                }
            });
        });
    };
})(jQuery);