0

我想在 iframe 中显示 SmartPHP 日历，但加载/显示需要时间。开始时会显示一个完全白色/平淡的页面

这是我的代码

<table id="table_1" class="form_table" align="center" cellpadding="0" cellspacing="0">
<tbody>
  <tr><td width="1250" height="950">
<iframe id="myIframe" src="" width="100%" height="950" frameBorder="0"  /></iframe> 
 </td></tr></tbody></table>

这是jQuery

$(document).ready(function(){ 
$('#myIframe').attr('src','http://mysite.com/smartphpcalendar/index.php');

});

我有两个问题

1 - 我怎样才能减少加载时间？

2-如何向用户显示加载消息/加载器图像，以免失望和等待。

4

2 回答 2

0

正如 arkascha 所说，您应该将 src 属性直接应用于 html 元素以加快加载时间。至于显示加载屏幕，这可以通过在 iframe 顶部覆盖一个 div 来实现，当 iframe 加载时该 div 被移除

HTML

<table id="table_1" class="form_table" align="center" cellpadding="0" cellspacing="0">
<tbody>
  <tr><td width="1250" height="950">
 <div id="load_div">LOADING PLEASE WAIT</div>
<iframe id="myIframe" src="" width="100%" height="950" frameBorder="0"  /></iframe> 
 </td></tr></tbody></table>

JS

$('#myIframe').load(function(){ 
    $('#load_div').hide();
});

CSS

#loading_div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 950px;
}
于 2013-08-20T08:14:12.833 回答
0

为什么您实际上要等到整个站点加载完毕才触发 iframe 内容的加载？您实际上以这种方式强制延迟。

无需触发从$(document).ready...函数加载，只需将内容 url 放入 iframe src 标签：

<iframe id="myIframe" 
        src="http://mysite.com/smartphpcalendar/index.php" 
        width="100%" height="950" frameBorder="0">
</iframe>

这样浏览器就可以在整个页面设置完成之前开始加载内容。

于 2013-08-20T08:07:18.213 回答