jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

天梯梦

浏览: 13730859 次
性别:
来自: 洛杉矶

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript /Jquery / Bootstrap / Web

jQuery JavaScript Ajax CSS 浏览器

链接主题：

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了

第五种加载图片

<html>
<head>
<title>JavaScript图片预加载代码，显示loading</title>

<style type="text/css">
	div{
		border:#aaaaaa 3px solid;
		width:200px;
		padding:2px;
		margin:2px 9px;
		font-size:12px;
		line-height:22px;
		color:#999999;
	}

	.ipt1{
		width:160px;
		font-size:12px;
		color:#1F6478;
		border:#999999 1px solid;
		margin-left:9px;
	}

	.ipt2{
		border:#999999 1px solid;
		margin-left:6px;color:#666666；
	}

	p{
		margin:0px;
		padding:0px;
		background-image:url(http://www.codefans.net/jscss/demoimg/loading.gif);
		background-position:center;
		background-repeat:no-repeat;
		width:200px;
		height:200px;
		text-align:center;
		font-size:12px;
		color:#999999;
		line-height:26px;
	}
</style>

<script language="javascript" type="text/javascript">
	function preloadimg(url,obj,ipt){
		var img = new Image();
		obj.innerHTML = "<p>Loading...</p>";
		img.onload = function(){
			obj.innerHTML = "";
			obj.style.width = String(img.width)+"px";
			ipt.style.width = String(img.width-40)+"px";
			obj.appendChild(img);
		};

		img.onerror = function(){
			obj.innerHTML="Loading Fail !"
		};

		img.src = url; //img.src 一定要写在img.onload之后，否则在IE中会出现问题
	}

	function show(){
		var div = document.getElementsByTagName("div")[0];
		var input = document.getElementsByTagName("input");

		preloadimg("http://www.codefans.net/jscss/demoimg/wall9.jpg",div,input[0]);
		input[0].onclick = function(){this.value=""};
		input[1].onclick = function(){preloadimg(input[0].value,div,input[0]);}
	}
	window.onload = show;
</script>

</head>

<body>
<div></div><br />
<input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>
</body>
</html>

或者使用

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="MinmyLazyload.js" type="text/javascript"></script>
<body>
<img original="http://justcoding.iteye.com/uploadfiles/20100424-2_20914.jpg">
<img original="http://justcoding.iteye.com/uploadfiles/20100423-1_85399.jpg">
<script type="text/javascript">$("img").lazyload({ placeholder: "img-loader.gif", effect:"fadeIn" });
</script>
</body>

minimylazyload.js 在附件中找

第六种本页

<style>
	#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px; z-index:1002; padding:2px 10px 2px 10px}
</style>

<body>
	<div id="loading">页面加载中…</div>
	 
	..........
	 
	<script type="text/javascript">
		document.write('<style>#loading{display:none;}</style>');
	</script>
</body>
</html>

minmylazyload_78159.rar (1 KB)
下载次数: 1165

分享到：

确保PHP安全不能违反的四条安全规则 | 网页插入PDF

2009-12-13 01:19
浏览 36893
评论(3)
分类:Web前端
查看更多

3 楼雏鸟上路 2013-08-09

2 楼天梯梦 2010-06-21

能用到就好，哈哈~~

1 楼 javatim 2010-06-20

很棒，剛剛要用到。很全……謝謝兄台！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论