2007-04-02

页面正在加载组件 （开源）

   作者：kiral，http://fantasy.javaeye.com/blog/67320，转载请保留。   

    出场白：

    任何jsp页面只要使用包含附件中的loading.jsp将自动拥有“页面正在加载的。。”提示信息，在页面加载完后将自动隐藏。效果见附件。

   第1个附件是效果图，当用户访问页面的时候，会出现这个效果图，页面加载完了后，提示就会自动消失。

   第2个附件是用UTF-8编码的组件，如果你的项目使用的是UTF-8编码，请下载这个。

   第3个附件是GB2312编码的。

   我为什么使用这个组件？

  1。交互性。 客户清楚知道，你的页面是在加载，需要等待，而不用对着一个空白的网页发呆。

  2。方便。  对于程序员来说，只要包含loading页面，就能自动拥有“页面正在加载”功能。

  3。美观。类似于yui-ext的效果。

  4。跨平台。在IE6和firefox2.0.03下测试成功。new~（在2.0里提供）

      2.0 see:http://kiral.javaeye.com/blog/67813

  5。低侵入性。不会影响包含这个组件的页面，对其他方法的调用。

   PS:欢迎大家讨论改善意见！

  • 7767dc0b-2776-4966-a0d0-5c3b9517960c-thumb
  • 描述: 效果图
  • 大小: 1.5 KB
  • loading.rar (2.2 KB)
  • 描述: 页面正在加载组件
  • 下载次数: 586
  • loading.rar (2.1 KB)
  • 描述: GB2312编码的，如果你的项目使用的是GB2312编码，请下载这个
  • 下载次数: 490
评论
fantasy 2007-04-23
soso 写道
如果我用的数据库端分页显示，在struts 的 action 中求得记录，再转到页面呈现。其实就是数据库查询较慢，我想在数据查出来前给用户一个等待提示，我该怎么做。楼主这个除非在数据呈现的页面上写访问数据库的逻辑才有用啊，呵呵，不知道对不对？

不是的，就算只是一个静态的html页面，包含这个组件页面，在页面加载完之前，都会给用户提示。
soso 2007-04-20
如果我用的数据库端分页显示，在struts 的 action 中求得记录，再转到页面呈现。其实就是数据库查询较慢，我想在数据查出来前给用户一个等待提示，我该怎么做。楼主这个除非在数据呈现的页面上写访问数据库的逻辑才有用啊，呵呵，不知道对不对？
fantasy 2007-04-17
2。0版本支持跨浏览器 http://kiral.javaeye.com/blog/67813
lz_cleaner 2007-04-04
真的不错，我已经应用到了我的工作中了。
fantasy 2007-04-04
HexUzHoNG 写道
<html>
	<head>
	</head>
	<body>
		<div id="target">页面加载完后，我就滚蛋了。。。</div>
	</body>
	<script>
			if (window.attachEvent) {
				window.attachEvent("onload", remove);
			} else if (window.addEventListener) {
				window.addEventListener("load", remove, false);	
			}
			
			function remove() {
				var div = document.getElementById("target");
				document.body.removeChild(div);
			}
	</script>	
</html>


Firefox2.0.0.3, IE6 下通过测试


Thank you!我也测试了下，的确可以。我在第2个版本中使用了你提供的方法。
而且也支持侵入性，其他页面照常调用自己的js方法。不会受到这个组件的影响！
HexUzHoNG 2007-04-03 
<html>
	<head>
	</head>
	<body>
		<div id="target">页面加载完后，我就滚蛋了。。。</div>
	</body>
	<script>
			if (window.attachEvent) {
				window.attachEvent("onload", remove);
			} else if (window.addEventListener) {
				window.addEventListener("load", remove, false);	
			}
			
			function remove() {
				var div = document.getElementById("target");
				document.body.removeChild(div);
			}
	</script>	
</html>


Firefox2.0.0.3, IE6 下通过测试
cozone_柯中 2007-04-03
quaff 写道
fantasy 写道
zack 写道
不错哦，先下载了试一下，期待楼主继续努力，最好支持firefox

恩，我也在思考这个问题，如何支持firefox？主要是里面用到了仅IE支持的方法。

onload事件触发的时候删除div


可以参考网易邮箱的loading实现方式, 那是用多框架来实现的.效果还不错
quaff 2007-04-03
fantasy 写道
zack 写道
不错哦，先下载了试一下，期待楼主继续努力，最好支持firefox

恩，我也在思考这个问题，如何支持firefox？主要是里面用到了仅IE支持的方法。

onload事件触发的时候删除div
HexUzHoNG 2007-04-03
fantasy 写道
zack 写道
不错哦，先下载了试一下，期待楼主继续努力，最好支持firefox

恩，我也在思考这个问题，如何支持firefox？主要是里面用到了仅IE支持的方法。


哪些方法仅IE支持，列出来看看。。
cozone_柯中 2007-04-03
有一个比较简单的实现方法
fantasy 2007-04-03
zack 写道
不错哦，先下载了试一下，期待楼主继续努力，最好支持firefox

恩，我也在思考这个问题，如何支持firefox？主要是里面用到了仅IE支持的方法。
lformat 2007-04-02
试试看。谢谢
cozone_柯中 2007-04-02
先看看
zack 2007-04-02
不错哦，先下载了试一下，期待楼主继续努力，最好支持firefox
fantasy
搜索本博客
最近加入圈子
存档
最新评论