当前位置：首页 » 编程语言 » html加载进度

html加载进度

发布时间: 2021-03-06 10:08:51

『壹』 js高手处理网站每页加载时显示进度条

这个很难实现复的，因为要想制实现准确的进度条，就必须知道要下载的总字节数和当前已下载的字节数，总字节数除了html文件本身，还有里面的各种对象如图片、动画、css文件、js文件等的字节数，还要区分哪些是从电脑的cache取出的，哪些是从服务器下载的，有些数据要等到页面完全下载完毕才能得到，这马后炮有什么用呢。IE浏览器本身的进度条都无法做到准确呢，何况用JS？
一般都是用个动态GIF图片或Falsh循环滚动一下糊弄糊弄用户就行了。我还没见过能精确计算出加载进度的网站，如果有，那我只能说他们糊弄的技术很牛B

『贰』 js怎么实现html加载进度条

一般都很少自己写了, 网上都有好多插件可以使用, 而且兼容性很好
非要自己写的话, 可以使用下面方法实现
二个div叠加
一个用来表示100%, 一个用来表示进度
完美

『叁』用JQuery实现页面Loading的效果，即：当页面加载完成前显示Loading的进度条，全部加载完成之后进度条消失

二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好)。
一楼的方法不是正确的。如果简单地放一个loading图片在页面上的话，会有两种情况：一、有可能实现加载的效果。二、在整个页面其它元素加载了大部分或全部后，这张图片才加载进来，那就实现不了加载的效果了。

常规的解决办法还是用ajax比较好。大概是这样的。
需要两个页面。1.一个是实际页面本身 2.另一个是一个空白页面放一张loading图片
先请求第2个页面，在这个页面中放一段ajax请求第1个页面，在success函数里将页面内容输出，并将loading图片隐藏掉。
代码是这样的：
loading page:
<body>
<img id='loadingImg' src='loading.gif' />
<body>
<script>
$.ajax({
type: 'GET',
url: 实际页面路径,
data: {},
success: function(){
$('body').append(data);
$('#loadingImg').hide();//或直接remove()
},
dataType: 'html'
});
</script>

==========================================================
呵呵，一个加载的问题要考虑搜索的话原来就这么麻烦了。 <div id="forspider">.....给搜索蜘蛛看的纯HTML....</div>这里面的内容是整个实际页面的HTML吗？是的话，那这个loading页面本身加载就很笨重了，还不如直接跳到真实页面呢。哎，可惜我不太懂搜索，悲剧。请指教----为什么要用绝对定位覆盖的方法来隐藏。直接把这一层display:none的话蜘蛛也会看不到吗？

『肆』显示加载进程，加载完成后进度条消失。这样的效果代码怎么处理拜托各位了 3Q

加载如下，你可以设置颜色等，还有大小，不懂的再问！ <html> <head> <title>正在载入...</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"> <table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"> <tr> <form name=loading> <td align=center> <img src="Loading.Gif"> <p><font color=gray>正在载入首页，请稍候.......</font></p> <p> <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:gray; background-color:white; padding:0px; border-style:none;"> <br> <input type=text name=percent size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none;"> <script>var bar = 0 var line = "||" var amount ="||" count() function count(){ bar= bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.value=bar+"%" if (bar<99) {setTimeout("count()",100);} else {window.location = "1.htm";} //加载完跳转的页面！ } </script> </p> </td> </form> </tr> </table> </body> </html>

『伍』打开网页显示从1到100的进度条然后进行跳转

||<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<title>跳转到.com</title>
</head>
<body>
<form name=loading>
<P align=center><FONT face=Arial color=#0066ff size=2>loading...</FONT>
<INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none"
size=46 name=chart>
<BR>
<INPUT style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center" size=47 name=percent>
<script language="javascript">
var bar=0
var line="||"
var amount="||"
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99){
setTimeout("count()",100);
}else{
window.location = "http://www.ifloveme.com/";
}
}
</script>
</P>
</form>
</body>
</html>

『陆』如何显示页面加载百分比进度

给你一个完整的例子
<html>
<head>
<title> 注册成功 </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<link rel= "stylesheet " href= "/bank/css/manager.css " type= "text/css ">
</head>
<body bgcolor= "#FFFFFF ">
<table width= "410 " border= "1 " align= "center " cellpadding= "0 " cellspacing= "0 " bordercolor= "#7F9BC8 ">
<tr>
<th> 注册成功！ </th>
</tr>
<tr>
<td bordercolor= "#FFFFFF "> 恭喜！您的信息注册成功！ <br>
将在5秒后返回。
<div style= "width:100%;height:2px;border:1px solid #666666 ">
<span id= "load " style= "background:#336699;width:0px "> </span>
</div>
<div align= "right ">
<input name= "goback " type= "button " class= "btnInput " value= "立即返回 " onClick= "window.close(); ">
</div>
</td>
</tr>
</table>
</body>
</html>
<script language= "JavaScript " type= "text/JavaScript ">
function loading(){
if(parseInt(load.style.width)> 400) window.close();
else load.style.width=parseInt(load.style.width)+4;
setTimeout( 'loading() ', 50);
}
loading();
</script>

『柒』 js,jquery页面预加载，怎么获取页面进度

jquery加载页面的方法(页面加载完成就执行),看下windows.onload$(document).ready之间的区别。
1、$(function(){
$("#a").click(function(){
//adding your code here

});
});
2、$(document).ready(function(){

$("#a").click(function(){
//adding your code here
});

});
3、window.onload = function(){
$("#a").click(function(){

//adding your code here
});
}
html代码为<input
type="button" id="a">点击</input>，且页面需要引用jquery的js文件

一般的加载页面时调用js方法如下：

window.onload = function() {
$("table
tr:nth-child(even)").addClass("even"); //这个是jquery代码
};

这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM
tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。更不幸的是，如果外部资源，例如图片需要很长时间来加载，那么这个js效果就会让用户感觉失效了。

但是用jquery的方法：

$(document).ready(function() {

//
任何需要执行的js特效
$("table tr:nth-child(even)").addClass("even");
});

就仅仅只需要加载所有的DOM结构，在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

还有一种简写的方式：

$(function() {

// 任何需要执行的js特效
$("table
tr:nth-child(even)").addClass("even");
});

『捌』 html当页面加载时有个进度条,页面加载完就停止

1、如果是iframe中加载：父窗口时间中启动进度条，子窗口Load事件中关闭
2、单个窗口实现进度条：ajax异步加载数据，然后生成Html元素了

『玖』这个html网页跳转带有进度条的跳转代码怎么做

可以用html5实现，也可以做成gif的图片，你只需要设置为和你程序设置一样的时间然后进度条自专动结束就好了。用图片是属最好实现，用ps软件就可以制作。

这个的实现，有很多中方法，简单的，是使用 DIV 嵌套，例如：

<div style="width: 100px; height: 10px; border: solid 1px #ccc;text-align: left">
<div style="width: 64px;height: 8px;background-color: #abc000"></div>
</div>

100px 代表 100 分， 64px 代表实际的得分

该进度条是100毫秒，+ 1% ，10秒钟后，跳转页面！要改时间的话！改100就好了

『拾』如何制作网页载入的进度条

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Loading</title>
</head>

<body>

<form name="loading">

<p align="center">正在跳转，请稍后...</p>

<p align="center">
<input type="text" name="bar" style="border-style:none; background-color:#D3E8D0; font-weight:bold" />
<input type="text" name="percentage"style="border-style:none; background-color:#FFFFFF; max-width:30px"/>
</p>

<p align="center">
如果您的浏览器不支持跳转，请点击<a href="http://www.126.com">这里</a>手动跳转
</p>

<script language="javascript" type="text/javascript">
var percent=0; //百分比进度，显示在滚动条后面
var element="||"; //滚动条单元竖线
var elements="||"; //滚动条当前竖线
count(); //开始调用循环

function count(){
percent=percent+10; //每次百分比加10
elements =elements + element; //滚动条当前竖线增加一个滚动条单元竖线
document.loading.bar.value=elements; //设置窗体loading表单中bar元素的当前值
document.loading.percentage.value=percent+"%"; //设置窗体loading表单中percentage元素的当前值
if (percent<99){ //percent小于99则继续循环
setTimeout("count()",500); //每500ms进行一次count()
}
else{
window.location = "http://www.126.com"; //percent达到100时跳转
}
}
</script>

</form>
</body>
</html>

阅读全文

html加载进度

与html加载进度相关的阅读推荐