Question

我想在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-如何向用户显示加载消息/加载器图像，不要让人失望和等待。

Answer 1

为什么你实际上要等到加载整个网站才会触发加载iframes内容？你实际上以这种方式强迫延迟。

而不是从$(document).ready...函数触发加载，只需将竞争网址放入iframe src标记：

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

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

Answer 2

正如arkascha所说，你应该将src属性直接应用于html元素，以加快加载速度。至于显示加载屏幕，这可以通过在iframe加载时删除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;
}

iframe需要时间来加载

2 个答案: