使用图像Jquery对话框预加载iFrame
Preload iFrame with Image Jquery Dialogue
当表单在我的jQuery对话框中加载时,我正试图用预加载GIF预加载这个surveyMonkey表单。我无法将此图像显示在框中。它在iframe加载时立即隐藏预加载图像。我已经加载了以下库:
- jquery UI 1.10.3
- jquery 1.10.1
- jquery_cookie.js
- 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>
看起来回调有时是在加载事件完成之前启动的,这种回调有时在某些浏览器下工作方式不同。我建议在回调中检查错误,并执行setTimeout(function, time, lang)
,这样它就可以再等待一段时间来绘制页面。我做了一个jsfiddle作为例子,但有时图像停留的时间会比它应该停留的时间长一点,这是因为setTimeout()
,但你可以在setTimeout()
中使用时间(毫秒)来获得更好的精度,但这会根据连接的速度和计算机在DOM中绘制数据的速度而变化。检查jsfiddle-这可能不是检查页面是否已完全加载和渲染的最佳方法,但它可以工作,如果我找到另一种方法,我一定会发布它。
相关文章:
- 使用php脚本验证访问者的年龄,并在不刷新的情况下根据结果加载iframe
- 使用Javascript(或jQuery)加载iframe内容
- Internet Explorer重新加载IFrame
- Fine Uploader-未收到来自已加载iframe的有效消息
- 使用本地生成的代码通过 JavaScript 加载 IFrame
- 加载iframe时激发的事件
- 动态渲染 .mht 文件,无需加载/iframe/嵌入
- 如何在选择列表项时重新加载iframe
- 如何使用JavaScript在iframe中重新加载iframe
- 在featherlight.js中延迟加载iFrame
- 实时在更改时重新加载iframe脚本
- 如何在不闪烁的情况下加载Iframe
- 如何按时间间隔重新加载Iframe内容,使其不会闪烁
- 设置 URL 以在 Django 模板中加载 iframe
- 在离开页面之前加载 iframe
- 加载 Iframe src,并从水平下拉菜单中进行选择
- 同时加载 iframe 并重置文档位置
- 单击按钮时重新加载 iframe 内容(本地 HTML)
- 单击元素时重新加载 iframe src
- 在可见时加载 iframe