0

我正在尝试使用预加载 GIF 预加载这个surveyMonkey 表单，同时表单加载到我的 jQuery 对话框中。我无法让此图像出现在框中。它会在 iframe 加载时立即隐藏预加载图像。我已经加载了以下库：

  1. jQuery UI 1.10.3
  2. jQuery 1.10.1
  3. jquery_cookie.js
  4. jquery-ui-1.7.1.custom.css

Javascript：

$(function Modal_Stuff() {

   $("#sm_e_s").load('https://www.surveymonkey.com/jsEmbed.aspx?sm=lbupQlmGZpFXbo7_2fP7Qwzw_3d_3d', function() {
    $('#loading').hide();
   });



    var myPos = {
    my: "center",
    at: "left bottom",
    of: window
};

    var myButton = {
    Close: function(){$(this).dialog('close');
    $.cookie('showDialog', 'false', { expires: 300 });  }  
    };

    if ($.cookie('showDialog') === undefined || $.cookie('showDialog') === null || $.cookie('showDialog') != 'false') {

$("#dialog-modal").dialog({
    width: 350,
    autoOpen: true,
    autoResize: true,
    modal: false,
    resizable: false,
    draggable: false,
    show: 'slide',
    buttons: myButton,
    position: myPos


});
}
});

CSS

#loading{
display:block;
position:absolute;
left:150px;
top:150px;
}

HTML

<title>jQuery UI Dialog - Basic modal</title>
<body>
    <div id="dialog-modal">
    <div id="surveyMonkeyInfo" style="width:300px;font-size:10px;color:#666;margin-top:30px;"><img src='http://info.kinnser.com/rs/kinnser/images/small-rotate.gif' width='32' id="loading" alt='loading' /><iframe id="sm_e_s" src="https://www.surveymonkey.com/jsEmbed.aspx?sm=lbupQlmGZpFXbo7_2fP7Qwzw_3d_3d" width="300" height="350" style="border:0px;padding-bottom:4px;overflow:hidden;" frameborder="0" scrolling='no' allowtransparency="true" ></iframe></div></div>
    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>
4

1 回答 1

0

看起来回调有时会在加载事件完成之前被触发，这个回调有时在某些浏览器下会有所不同。我建议在回调中检查错误并执行 asetTimeout(function, time, lang)以便它等待更多时间来绘制页面。setTimeout()我以jsfiddle 为例，但有时图像会比它应该的多一点，这是setTimeout()因为连接以及计算机获取数据并在 DOM 中绘制数据的速度。检查jsfiddle它可能不是检查页面是否已完全加载和呈现的最佳方法，但它可以工作，如果我找到另一种方法，我一定会发布它。

于 2013-07-15T20:34:55.823 回答