$(function(){
    var img = new Image();
    $(img).load(function(){
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('#loader').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function(){
        // notify the user that the image could not be loaded
    }).attr('src', 'http://www.rahbaridea.com/images/promotion.jpg');
});

$(function(){
    $("#intro_services a").click(function(){
        var imageSource = $(this).children("img").attr("src");
        $("#loader").addClass("loading");
        showImage(imageSource);
        return false;
    });
});

function showImage(src){
    $("#loader img").fadeOut("slow").remove();
    var largeImage = new Image();
    $(largeImage).attr("src", src).load(function(){
        $(largeImage).hide();
        $("#loader").append(this).removeClass("loading");
        $(this).fadeIn("slow");
    });
    $(largeImage).attr("src", src);
}