图像未显示在 Jquery Prepend 上

Question

我有以下功能，当我的用户登录 Facebook 时，它会在一个带有 gif 加载器的模态框和显示框之前添加。

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>");
}

当用户通过 Facebook 进行身份验证时，我调用了这个函数：

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

我的简单问题是，当我使用 FB 进行身份验证时，我的图像不会加载。模态出现了，文本也出现了，但没有图像。我知道图像或 CSS 没有任何问题，因为当我如下所示定期调用它时，它可以完美运行并且图像会显示出来。

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

非常感谢任何帮助，我知道这个问题可能看起来微不足道，但图像加载器非常重要，因为我的初始图形调用确实需要几秒钟。我还查看了几个 SO 问题such as this one，但找不到解决方案。

Answer 1

试试这个

$("#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>');}