Question

I have the following function that prepends a modal and display box with a gif loader when my user logs into Facebook.

function loadFacebookconnect() {
    $("#modalwait").prepend(
        "<div class='modal-backdrop id='modal-backdropid'></div>\
         <div class='modal hide fade in' id='myModal' style='display: block; '>\
             <div class='modal-body'>\
                 <p style='font-size: 28px; padding: 30px;text-align: center;'>\
                      <img style='padding-right:8px; vertical-align: text-bottom;'\
                           src='imgurl.gif'>\
                      Loading...\
                 </p>\
             </div>\
         </div>");
}

I call this function as I mentioned when the user authenticated with Facebook:

FB.Event.subscribe('auth.login', function(response) {
    loadFacebookconnect();
    window.location.reload();
});

My simple problem is that my image won’t load when I authenticate with FB. The modal shows up and so does the text but no image. I know there’s nothing wrong with the image or the CSS because when I call it regularly as shown below, it works perfectly and the image shows up.

<button onclick="loadFacebookconnect()">Try it</button>

Any help is greatly appreciated and I know this problem may seem trivial but the image loader is very important as my initial graph calls do tend to take several seconds. I also looked at several SO questions such as this one, but couldn’t find the solution.

Answer 1

Try this

$("#modalwait").prepend('<div class="modal-backdrop" id="modal-backdropid"></div><div class="modal hide fade in" id="myModal" style="display: block; "><div class="modal-body"><p style="font-size: 28px;padding: 30px;text-align: center;"><img style="padding-right:8px;vertical-align: text-bottom;" src="imgurl.gif"/>Loading...</p></div></div>');}