页面载入中的功能怎么写? 由于页面打开的时间过长,想写个页面载入中的功能,有没有好一点的例子? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 可以将要打开的页面 放到 iframe 中,等iframe加载完毕再显示出来。老虎传送门 楼上用iframe效果我感觉应该是可以实现的,但是我觉得跟LZ说的页面打开的时间过长,可能时间更长,时间过长可能的情况有很多,其一就是加载的功能或者是数据过多造成的,我也解决不了提供两个页面加载的方法//页面加载$(function () { //加载内容 });或者function test(){ //功能}window.onload = test; 老虎的方式+1,注意iframe开始要隐藏起来,并且在开始页面实现一个加载中的图标。 你的页面是用的什么?ajax、structs标签、javabeen,依情况而定、、 用ajax吧 请求开始 loading 所有内容放到一个总容器中,容器隐藏,window.onload中显示容器信息就行了<div id="loading">正在努力加载中...</div><div id="dvContainer" style="display:none">所有的内容放到这里来<img src="http://www.coding123.net/imgdesign/20120928/20120928164213345.jpg"/></div><script>window.onload=function(){ document.getElementById('loading').style.display='none' document.getElementById('dvContainer').style.display='block'}</script> 很多人都回复的挺好,但我认为缺少点睛之笔把这个事情说的透彻的. Extjs文档页面就有loading效果,楼主可以查看一下它的源码,然后在对照我下面的剖析.要做到简单的loading效果,页面的代码结构应该是这样的:<!doctype html><html><head><title>The title</title><显示loading效果必须的css,用来设置loading图标的样式和蒙版层样式, 它要小而精悍, 加载速度要足够快, /></head><body onload="把蒙板层和loading图标层干掉"><div><img src="loading.gif" />这里是loading图标层, loading图标的体积要足够小, 加载速度要足够快</div><div class="mask">这是一个蒙板层, 蒙板层的作用就是把真正的body部分先蒙住,等全加载之后再显示,蒙板层做法很简单, position=absolute, left=0, top=0, height='full height', width='full width', z-index比图表层的小1</div><div>下面就是你的需要长时间加载的主体内容了.</div></body></html>上面的做法有时候会产生一个小问题: 就是页面主体内容过长的话,会产生滚动条,滚动一下就又可以看到主体内容了, 解决这个问题也不难, 刚开始的时候把body的overflow设置为hidden, 最后在onload里面还原回来. extjs文档例子:http://dev.sencha.com/deploy/ext-2.3.0/docs/ <body> <script type="text/javascript"> var container = Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), width : 400, height : 700, style : 'margin:0 auto;', layout: { type : 'vbox', align : 'center', pack : 'center' }, items : [ new Ext.ProgressBar({ id : 'pgb', width : 300 }) ] }); var pgb = Ext.getCmp('pgb'); pgb.wait({ text: 'loading...', }); var load = function() { if ( ready != 'yes' ) { setTimeout(load, 100); } else { pgb.updateText('Done!'); container.hide(); } } load(); </script></body> 非常诡异的 正则表达式 失效问题..... A-Z 可以匹配小写字母, 求助... 什么时候所有ajax请求都完成 想在点击子页面的某个链接时,显示父页面的某个部分,这个herf怎么写? 表格内容计算!急!谢谢! document.getElementById("idName");的 怎么实现这个功能!! 关于realplay播放控制!(找了一天资料了,还是没成功!!) 在页面全屏的情况下,怎么让任务栏不隐藏掉。 梅花大侠等高手进来!挑战性问题 SOS!!!!!请大家帮忙~~~! 点击按钮移动DIV js怎么去掉某个标签里面的内容
提供两个页面加载的方法
//页面加载
$(function () {
//加载内容
});或者
function test(){
//功能
}window.onload = test;
<div id="dvContainer" style="display:none">
所有的内容放到这里来
<img src="http://www.coding123.net/imgdesign/20120928/20120928164213345.jpg"/>
</div>
<script>
window.onload=function(){
document.getElementById('loading').style.display='none'
document.getElementById('dvContainer').style.display='block'
}
</script>
要做到简单的loading效果,页面的代码结构应该是这样的:
<!doctype html>
<html>
<head>
<title>The title</title>
<显示loading效果必须的css,用来设置loading图标的样式和蒙版层样式, 它要小而精悍, 加载速度要足够快, />
</head>
<body onload="把蒙板层和loading图标层干掉">
<div><img src="loading.gif" />这里是loading图标层, loading图标的体积要足够小, 加载速度要足够快</div>
<div class="mask">这是一个蒙板层, 蒙板层的作用就是把真正的body部分先蒙住,等全加载之后再显示,蒙板层做法很简单, position=absolute, left=0, top=0, height='full height', width='full width', z-index比图表层的小1</div>
<div>
下面就是你的需要长时间加载的主体内容了.
</div>
</body>
</html>上面的做法有时候会产生一个小问题: 就是页面主体内容过长的话,会产生滚动条,滚动一下就又可以看到主体内容了, 解决这个问题也不难, 刚开始的时候把body的overflow设置为hidden, 最后在onload里面还原回来.
<script type="text/javascript">
var container = Ext.create('Ext.container.Container', {
renderTo : Ext.getBody(),
width : 400,
height : 700,
style : 'margin:0 auto;',
layout: {
type : 'vbox',
align : 'center',
pack : 'center'
},
items : [ new Ext.ProgressBar({
id : 'pgb',
width : 300
}) ]
}); var pgb = Ext.getCmp('pgb');
pgb.wait({
text: 'loading...',
});
var load = function() {
if ( ready != 'yes' ) {
setTimeout(load, 100);
} else {
pgb.updateText('Done!');
container.hide();
}
}
load();
</script>
</body>