使用Image Jquery Dialogue预加载iFrame

时间:2013-07-15 17:46:39

标签: javascript jquery ajax preload

我正在尝试使用预加载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
  5. 使用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>
    

1 个答案:

答案 0 :(得分:0)

看起来有时在load事件结束之前触发了回调,这个回调在某些浏览器下有时会有所不同。我建议在回调中检查错误并执行setTimeout(function, time, lang),以便等待绘制页面多一点。我做了一个jsfiddle作为一个例子,但有些时候图像保持的比它应该多一点,这是因为setTimeout(),但你可以在setTimeout()中使用时间(毫秒)来获得一个更好的精度但这将根据连接的速度以及计算机在DOM中绘制数据的速度有多快而改变。检查jsfiddle out它可能不是检查页面是否已完全加载和渲染的最佳方法,但它可以工作,如果我找到另一种方法,我一定会发布它。