Cargando formulario AJAX con jQuery usando imagen de cargando

[mikehove]

Hola amigos de esta productiva comunidad. Traigo un plugin que funciona bien: se trata de hacer click en un enlace y llama a un popup por Ajax (de un archivo externo -formulario). El problema es cuando a éste le agrego un gif animado mostrando la acción de carga del formulario.

¿Qué estoy haciendo mal? Con letras rojas es el código que agregué de la img load

Este es mi código completo:

html:

Código HTML:

<!-- Button that triggers the popup -->
<a href="#" id="registrate">Regístrate</a>
<!-- Element to pop up -->
<div id="element_to_pop_up">

    <a class="bClose"></a>
    
    <div class="content">
    
  
</div> 

js:

Código:

    ;(function($) {
        $(function() {
            $('#registrate').bind('click', function(e) {            
			
				
			    var $contenidoAjax = $('#element_to_pop_up').html('<p><img src="http://www.funcion13.com/wp-content/uploads/2012/04/loader.gif" /></p>');
     
    // Simulo una petición AJAX de 3 segundos
    setTimeout(function(){
        $contenidoAjax.html('<a class="bClose"></a><div class="content"></div>');
    }, 3000);
    e.preventDefault();			 
				
				
          $('#element_to_pop_up').bPopup({
  content:'ajax', //'iframe' or 'ajax'
           contentContainer:'.content',
			
            loadUrl:'carga1.php' //Uses jQuery.load()

        });


            });
         });
     })(jQuery);


/**************************************************************/
(function(b) {
    b.fn.bPopup = function(n, p) {
        function t() {
            b.isFunction(a.onOpen) && a.onOpen.call(c);
            k = (e.data("bPopup") || 0) + 1;
            d = "__bPopup" + k;
            l = "auto" !== a.position[1];
            m = "auto" !== a.position[0];
            i = "fixed" === a.positionStyle;
            j = r(c, a.amsl);
            f = l ? a.position[1] : j[1];
            g = m ? a.position[0] : j[0];
            q = s();
            a.modal && b('<div class="bModal ' + d + '"></div>').css({
                "background-color": a.modalColor,
                height: "100%",
                left: 0,
                opacity: 0,
                position: "fixed",
                top: 0,
                width: "100%",
                "z-index": a.zIndex + k
            }).each(function() {
                a.appending && b(this).appendTo(a.appendTo)
            }).animate({
                opacity: a.opacity
            }, a.fadeSpeed);
            c.data("bPopup", a).data("id", d).css({
                left: !a.follow[0] && m || i ? g : h.scrollLeft() + g,
                position: a.positionStyle || "absolute",
                top: !a.follow[1] && l || i ? f : h.scrollTop() + f,
                "z-index": a.zIndex + k + 1
            }).each(function() {
                a.appending && b(this).appendTo(a.appendTo);
                if (null != a.loadUrl) switch (a.contentContainer = b(a.contentContainer || c), a.content) {
                case "iframe":
                    b('<iframe scrolling="no" frameborder="0"></iframe>').attr("src", a.loadUrl).appendTo(a.contentContainer);
                    break;
                default:
                    a.contentContainer.load(a.loadUrl)
                }
            }).fadeIn(a.fadeSpeed, function() {
                b.isFunction(p) && p.call(c);
                u()
            })
        }
        function o() {
            a.modal && b(".bModal." + c.data("id")).fadeOut(a.fadeSpeed, function() {
                b(this).remove()
            });
            c.stop().fadeOut(a.fadeSpeed, function() {
                null != a.loadUrl && a.contentContainer.empty()
            });
            e.data("bPopup", 0 < e.data("bPopup") - 1 ? e.data("bPopup") - 1 : null);
            a.scrollBar || b("html").css("overflow", "auto");
            b("." + a.closeClass).die("click." + d);
            b(".bModal." + d).die("click");
            h.unbind("keydown." + d);
            e.unbind("." + d);
            c.data("bPopup", null);
            b.isFunction(a.onClose) && setTimeout(function() {
                a.onClose.call(c)
            }, a.fadeSpeed);
            return !1
        }
        function u() {
            e.data("bPopup", k);
            b("." + a.closeClass).live("click." + d, o);
            a.modalClose && b(".bModal." + d).live("click", o).css("cursor", "pointer");
            (a.follow[0] || a.follow[1]) && e.bind("scroll." + d, function() {
                q && c.stop().animate({
                    left: a.follow[0] && !i ? h.scrollLeft() + g : g,
                    top: a.follow[1] && !i ? h.scrollTop() + f : f
                }, a.followSpeed)
            }).bind("resize." + d, function() {
                if (q = s()) j = r(c, a.amsl), a.follow[0] && (g = m ? g : j[0]), a.follow[1] && (f = l ? f : j[1]), c.stop().each(function() {
                    i ? b(this).css({
                        left: g,
                        top: f
                    }, a.followSpeed) : b(this).animate({
                        left: m ? g : g + h.scrollLeft(),
                        top: l ? f : f + h.scrollTop()
                    }, a.followSpeed)
                })
            });
            a.escClose && h.bind("keydown." + d, function(a) {
                27 == a.which && o()
            })
        }
        function r(a, b) {
            var c = (e.width() - a.outerWidth(!0)) / 2,
                d = (e.height() - a.outerHeight(!0)) / 2 ;
				// no d = (e.height() - a.outerHeight(!0)) / 2 - b;
            return [c, 20 > d ? 20 : d]
        }
        function s() {
            return e.height() > c.outerHeight(!0) + 20 && e.width() > c.outerWidth(!0) + 20
        }
        b.isFunction(n) && (p = n, n = null);
        var a = b.extend({}, b.fn.bPopup.defaults, n);
        a.scrollBar || b("html").css("overflow", "hidden");
        var c = this,
            h = b(document),
            e = b(window),
            k, d, q, l, m, i, j, f, g;
        this.close = function() {
            a = c.data("bPopup");
            o()
        };
        return this.each(function() {
            c.data("bPopup") || t()
        })
    };
    b.fn.bPopup.defaults = {
        amsl: 50,
        appending: !0,
        appendTo: "body",
        closeClass: "bClose",
        content: "ajax",
        contentContainer: null,
        escClose: !0,
        fadeSpeed: 250,
        follow: [!0, !0],
        followSpeed: 500,
        loadUrl: null,
        modal: !0,
        modalClose: !0,
        modalColor: "#000",
        onClose: null,
        onOpen: null,
        opacity: 0.7,
        position: ["auto", "auto"],
        positionStyle: "absolute",
        scrollBar: !0,
        zIndex: 9997
    }
})(jQuery);