`
fantasy
  • 浏览: 516186 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面正在加载组件 (开源)

阅读更多

   作者:kiral,http://fantasy.iteye.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.iteye.com/blog/67813

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

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

  • 描述: 效果图
  • 大小: 1.5 KB
  • loading.rar (2.2 KB)
  • 描述: 页面正在加载组件
  • 下载次数: 1165
  • loading.rar (2.1 KB)
  • 描述: GB2312编码的,如果你的项目使用的是GB2312编码,请下载这个
  • 下载次数: 742
分享到:
评论
18 楼 unix 2007-07-25  
哈哈,很好的东东,谢谢楼主分享
17 楼 fantasy 2007-06-27  
欢迎大家使用!~
16 楼 fantasy 2007-04-23  
soso 写道
如果我用的数据库端分页显示,在struts 的 action 中求得记录,再转到页面呈现。其实就是数据库查询较慢,我想在数据查出来前给用户一个等待提示,我该怎么做。楼主这个除非在数据呈现的页面上写访问数据库的逻辑才有用啊,呵呵,不知道对不对?

不是的,就算只是一个静态的html页面,包含这个组件页面,在页面加载完之前,都会给用户提示。
15 楼 bat0906 2007-04-21  
了谢了
14 楼 soso 2007-04-20  
如果我用的数据库端分页显示,在struts 的 action 中求得记录,再转到页面呈现。其实就是数据库查询较慢,我想在数据查出来前给用户一个等待提示,我该怎么做。楼主这个除非在数据呈现的页面上写访问数据库的逻辑才有用啊,呵呵,不知道对不对?
13 楼 fantasy 2007-04-17  
2。0版本支持跨浏览器 http://kiral.iteye.com/blog/67813
12 楼 lz_cleaner 2007-04-04  
真的不错,我已经应用到了我的工作中了。
11 楼 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方法。不会受到这个组件的影响!
10 楼 a3mao 2007-04-04  
看看先
9 楼 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 下通过测试 
8 楼 cozone_柯中 2007-04-03  
quaff 写道
fantasy 写道
zack 写道
不错哦,先下载了试一下,期待楼主继续努力,最好支持firefox

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

onload事件触发的时候删除div


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

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

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

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


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

恩,我也在思考这个问题,如何支持firefox?主要是里面用到了仅IE支持的方法。
3 楼 lformat 2007-04-02  
试试看。谢谢
2 楼 cozone_柯中 2007-04-02  
先看看
1 楼 zack 2007-04-02  
不错哦,先下载了试一下,期待楼主继续努力,最好支持firefox

相关推荐

    C#开发全套31个UI组件Winform 开源共享,winform第三方开源ui库,C#

    3. 导航组件:如选项卡控件、树形视图,用于组织和展示多个页面或层级结构的数据。 4. 进度条和指示器:用于反馈任务执行状态,如进度条、加载动画等。 5. 对话框和提示:如消息框、输入对话框,用于与用户进行交互...

    uniapp 好用的图片懒加载组件.zip

    在处理大量图片时,如果一次性加载所有图片,可能会对服务器和用户设备造成负担,甚至导致页面加载缓慢。因此,图片懒加载技术应运而生,它是一种优化策略,只有当图片进入用户可视区域时才开始加载。 "uniapp 好用...

    一个为TailwindCSSUI组件制作的开源网站。在这里我们可以找到几乎所有使用tailwindCSS制作的UI组件.zip

    8. **性能优化**:TailwindCSS 使用Just-In-Time (JIT)编译模式,只包含页面上实际使用的CSS utility classes,大大减少了CSS的大小,提升了页面加载速度。 9. **学习资源**:该开源网站不仅提供了UI组件,还可能...

    ajax加载组件

    如果你需要更具体的实现细节或例子,可以尝试访问提供的博客链接,或者寻找类似的开源Ajax加载组件,如jQuery的`$.ajax`或`axios`库等。这些工具都提供了丰富的功能和良好的API设计,便于在项目中快速集成和使用。

    vuejs的双向移动端下拉加载更多组件

    这种设计可以减少页面加载时间,提高用户界面的响应速度。 2. **Vue.js中的组件化开发** Vue.js 的核心特性之一就是组件化,它可以将复杂的应用拆分成多个独立、可复用的组件。每个组件都有自己的视图和数据逻辑,...

    ViewPager嵌套Fragment,懒加载处理,开源框架viewpagerindicator使用

    在Android开发中,ViewPager是一个非常常用的组件,它用于展示多个页面并允许用户通过滑动来切换。当ViewPager与Fragment结合使用时,可以构建出复杂的、动态的多视图界面。在处理大量数据或者图片时,为了提高应用...

    页面加载锁屏

    进度条是页面加载锁屏的一个常见形式,它向用户显示加载进度,让用户知道页面正在加载并且即将完成,从而提高用户的耐心和满意度。 实现页面加载锁屏的技术手段有很多,例如使用JavaScript和CSS。在JavaScript中,...

    一个用于react native 页面加载的loading组件 iOS

    总结来说,"react-native-easy-loading-view"是一个针对React Native应用的加载组件,它简化了在页面加载期间向用户显示反馈的过程。通过学习和使用这个组件,开发者可以更好地理解和掌握React Native的组件化思想、...

    基于Apache Nutch和Solr等组件扩展实现对于AJAX加载类型页面的完整页面内容抓取,以及特定数据项的解析和索引

    在处理AJAX加载的页面时,Nutch默认可能无法获取到完整的动态内容,因为这些内容是在页面加载后通过JavaScript异步加载的。因此,我们需要扩展Nutch的功能。 Htmlunit是一个无头浏览器库,它可以模拟浏览器执行...

    (兼容Axure9)antd的元件库+后台模板页面+官网组件 pc元件库.zip

    1. Ant Design元件库:Ant Design是阿里巴巴开源的一款基于React的UI设计语言和组件库,它的设计理念源自于中式设计原则,提供了丰富的界面元素,如按钮、表单、布局、通知、加载等。这个元件库使Axure9用户可以直接...

    swift-iOS上一款简易的页面空白占位小组件.

    "页面空白占位小组件"就起到了这样的作用,它能以优雅的方式展示提示信息,例如“暂无数据”或“加载中”。通过自定义的动画和文字,开发者可以轻松定制与应用风格相符的空白占位视图。 在"Swift开发-UI相关控件"的...

    AXURE RP 8 常用的组件库

    Element UI 是一套基于 Vue.js 的开源 UI 组件库,它的设计理念是简洁、直观、高效。AXURE RP 8 中的Element风格库,为设计师提供了与Element UI 兼容的原型组件。 1. **按钮**: 与Bootstrap类似,Element风格库也...

    开源flash+xml相册组件.zip

    开源Flash+XML相册组件是一种基于Adobe Flash技术与XML数据格式的交互式图片展示工具。在Web开发领域,这样的组件通常用于创建动态、可自定义的图像库或在线相册,为用户提供友好的浏览体验。Flash因其动画效果和...

    前端开源库-post-web

    2. **模块化**:通过Webpack或Rollup等模块打包工具,将分散的文件合并成单个或少数几个可加载的文件,减少HTTP请求,提高页面加载速度。 3. **压缩和优化**:利用Gzip进行文件压缩,减少传输大小;使用terser或...

    cubeui滴滴开源的Web移动端组件库

    5. **性能优化**: Cube-UI注重性能,采用轻量级的设计,避免过度渲染,减少不必要的DOM操作,提升页面加载速度和用户体验。 6. **持续更新与维护**:作为滴滴开源项目,Cube-UI有持续的维护和更新,社区活跃,可以...

    前端开源ui框架

    KoalaUI可能采用模块化设计,允许开发者按需引入所需组件,减少不必要的资源加载,从而优化页面性能。此外,KoalaUI可能还支持自定义主题,方便开发者根据项目需求调整颜色、字体等视觉风格。 2. **LigerUI**: ...

    Algolia 开源的一款地址自动填充 Input 组件.zip

    2. **引入组件**:在项目中引入组件的 JavaScript 和 CSS 文件,确保它们能在页面上正确加载。 3. **配置 Algolia**:注册 Algolia 账户并获取应用程序 ID 和 API 密钥,这些都是组件正常工作所必需的。 4. **初始化...

    列表下拉加载更多

    在iOS应用开发中,"列表下拉加载更多"是一个常见的功能,它极大地提升了用户体验,让用户能够在不离开当前页面的情况下获取更多的内容。这个功能通常应用于新闻、社交媒体、电商等需要不断滚动浏览新内容的应用中。...

    Javaee学习京东仿静态页面+JQ组件

    2. **京东仿静态页面**:在电商网站中,静态页面通常用于提高网站的加载速度和SEO优化。仿静态页面技术是将动态生成的页面模拟成静态HTML文件,以提高用户体验。这涉及到URL重写、页面缓存以及服务器配置等多个方面...

    android Gallery实现异步加载网络图片 并只加载当前停止页面图.rar

    本项目是关于如何在`Gallery`中异步加载网络图片,并且优化性能,只加载当前显示的页面图片。这涉及到Android UI编程、网络请求、线程管理和图片缓存等多方面的知识点。 1. **Android UI线程与工作线程**:Android...

Global site tag (gtag.js) - Google Analytics