¿Cómo cargar un contenido (incluir imágenes de contenido) y luego desaparecer?

Esto no es tan sencillo. Necesita obtener controladores de carga en las imágenes cargadas dinámicamente, pero sin modificar el HTML de origen no puede hacerlo hasta que ya hayan comenzado a cargarse, lo que lo hace un poco más complicado porque algunos podrían completarse antes de que lo verifique. Entonces, podría hacer algo como esto que obtenga todos los objetos de imagen en el contenido cargado dinámicamente y luego verifique cada uno para ver si ha terminado de cargarse. Si no ha terminado de cargarse, entonces se instala un controlador de carga para que podamos contar cuándo terminó de cargarse el último. Cuando todos hayan terminado de cargar, podemos hacer lo siguiente. fadeIn():

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        var self = $(this);

        function fadeIn() {
            $("#contents").fadeIn('slow', function(){
                alert('Faded in!');
            });
        }

        self.load("url", {}, function() {
            var imgs = self.find("img");
            var imgsRemaining = imgs.length;
            imgs.each(function() {
                // if the image isn't already loaded, then attach an onload handler
                if (!img.complete || !this.height || !this.width) {
                    this.onload = this.onerror = this.onabort = function() {
                        // decrement imgsRemaining
                        --imgsRemaining;
                        // if no more images to finish loading, then start the fade
                        if (imgsRemaining == 0) {
                            fadeIn();
                        }
                    });
                } else {
                    // this image already loaded
                    --imgsRemaining;
                }
            });
            // if there were no images that weren't loaded yet
            if (imgsRemaining == 0) {
                fadeIn();
            }
        });
    });
});

O, para una forma un poco más general de resolver el problema, aquí hay un método jQuery genérico que carga contenido y luego llama a la devolución de llamada cuando tanto el contenido como todas las imágenes en el contenido han terminado de cargarse. Esto sería mucho más reutilizable y probablemente haría que su código fuera más legible. Lo usas como el .load(url, data, fn) method:

jQuery.fn.loadComplete = function(url, data, fn) {
    // check if optional data argument is missing
    if (typeof data == "function") {
        fn = data;
        data = {};
    }
    // dynamically load the content
    this.load(url, data, function() {
        var self = this;
        // when content is parsed, check to see when all images are loaded
        var imgs = $(this).find("img");
        var imgsRemaining = imgs.length;
        imgs.each(function() {
            if (this.complete) {
                // if image is already loaded, just decrement the count
                --imgsRemaining;
            } else {
                // image not loaded yet, install onload handler
                this.onload = this.onerror = this.onabort = function() {
                    // when img has finished loading, check to see if all images are now loaded
                    if (--imgsRemaining == 0) {
                        fn.call(self);
                    }
                };
            }
        });
        if (imgsRemaining == 0) {
            fn.call(self);
        }
    });
}

Entonces, con este nuevo método, su código sería simplemente este:

$(document).ready(function(){
    $('#contents').fadeOut('slow', function(){
        $(this).loadComplete("url", {}, function(){
            $("#contents").fadeIn('slow', function(){
                alert('Faded in!');
            });
        });
    });
});