`
ruishen
  • 浏览: 52086 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

ol.loading 页面loading层。使用简单

 
阅读更多

ol.loading是基于jquery的loading mask遮罩控件,轻量,且功能强大。

支持主流浏览器:ie6+,firefox等。

基于MIT和GPL协议下开源。

使用方法:

加载需要支持的类库:

<script type="text/javascript" src="loading-min.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js" charset="UTF-8"></script>
<link href="loading.css" type="text/css" rel="stylesheet">

调用:

var loading=new ol.loading({id:"table1"});//初始化对象
loading.show();//显示遮罩
loading.hide();//隐藏遮罩

支持属性:

new ol.loading({
 id:"table1",//需显示遮罩对象的id
 loadingClass:null,//外加样式
 zIndex:800//z-index
});

演示地址:http://open-lib.googlecode.com/svn/trunk/ol.loading_0.1/demo.html

下载地址:http://open-lib.googlecode.com/svn/trunk/ol.loading_0.1/ol.loading.rar


另外一个也不错:http://www.open-open.com/ajax/ajax20100718174642.htm

分享到:
评论

相关推荐

    使用jQuer简化Ajax开发——Ajax开发入门.docx

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。jQuery 是一个强大的 JavaScript 库,它极大地简化了 DOM 操作、事件处理、动画效果以及Ajax交互...

    使用jQuery增强Web应用.pdf

    例如,要更新统计数据,可以传递参数给服务器页面,使用`$.post()`或`$.get()`方法,同时可传递数据对象和回调函数。以下是一个简单的例子: ```javascript $.post('save.cgi', {text: 'my string', number: 23}, ...

    xinwenliebiao.zip

    8. **性能优化**:为了提供流畅的用户体验,前端需要优化加载速度,如延迟加载(Lazy Loading)未在视口内的新闻,压缩图片大小,使用代码分割减少首屏加载时间等。 9. **无障碍性**:遵循WCAG(Web Content ...

    视频播放+列表

    展示视频列表通常使用`&lt;ul&gt;`(无序列表)或`&lt;ol&gt;`(有序列表)标签,每个视频项作为一个`&lt;li&gt;`(列表项)元素。可以通过CSS美化样式,如添加背景图片、边框等,提升用户体验。 4. **JavaScript与jQuery交互** 要...

    个人页面

    10. **优化与性能**:考虑到加载速度和用户体验,应优化图片大小,使用正确的文件格式,并引入延迟加载技术(如`&lt;img loading="lazy"&gt;`)。 个人页面项目"personal-page-master"可能包含了实现以上功能的所有HTML...

    美工知识相关的css东西

    为了提高页面加载速度和用户体验,可以使用CSS预加载图像技术: ```css div.loader { background: url(images/hover.gif) no-repeat; background: url(images/hover2.gif) no-repeat; background: url(images/...

    Personal-Portfolio:按照freecodecamp响应式Web设计项目的指导方针,创建了一个个人投资组合页面。

    此外,还会使用`&lt;h1&gt;`至`&lt;h6&gt;`定义标题,`&lt;p&gt;`表示段落,`&lt;a&gt;`用于链接,`&lt;img&gt;`插入图片,`&lt;ul&gt;`、`&lt;ol&gt;`和`&lt;li&gt;`构建列表。 2. **响应式设计**: 响应式设计是确保网站在不同设备上都能良好显示的关键技术。在`...

    ajax经典怎样传输数据

    如果设置为`false`,则为同步请求,会阻塞页面直到请求完成。 ```javascript async: true, // 异步请求 ``` 2. **cache**:是否使用浏览器缓存,默认为`true`。若设置为`false`,则不会从浏览器缓存中加载请求...

    文本框文本自动补全效果示例分享

    这些数据在前端被用来动态创建和更新补全列表,列表项可能以HTML列表(`&lt;ul&gt;`或`&lt;ol&gt;`)的形式呈现,并通过CSS进行样式调整,使其与页面设计保持一致。 用户在输入框中输入文字时,`$.Completion`插件会实时监测...

    各种漂亮的HTML模板

    6. **网页性能优化**:为了提高加载速度,模板可能会采用延迟加载(lazy loading)技术,仅在需要时加载图像。同时,CSS和JavaScript可能被合并和压缩,减少HTTP请求,提升页面加载效率。 7. **SEO(搜索引擎优化)...

    pratyushmonisj.github.io

    6. **静态站点生成器**:虽然没有直接提到,但许多GitHub Pages项目可能使用Jekyll、Hugo或Gatsby这样的静态站点生成器,它们可以将Markdown和模板转换为静态HTML页面。 7. **响应式设计**:考虑到现代网页需要适应...

    news.zfe.space

    为了提高加载速度和用户体验,开发者可能会采用延迟加载(lazy loading)技术,只在需要时加载图片或某些内容,以及压缩CSS和JavaScript文件,减少网络传输的数据量。 10. **SEO最佳实践** "news.zfe.space"作为...

    jQuery完全实例.rar

    你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 -------------------------------------------------------------------------------- A shorthand ...

    cheng92.com:https

    6. **性能优化**:查看是否使用了CDN(内容分发网络)、延迟加载(lazy loading)、压缩资源等方法来提升页面加载速度。 7. **安全实践**:检查是否有使用HTTPS相关的头部,如`Content-Security-Policy`,以增强...

    jquery模拟flash动画逐渐伸缩发展历程列表

    可以采用分批加载、延迟加载(lazy loading)等策略,只在需要时才执行动画,或者利用CSS3硬件加速来提高动画性能。 6. **版权与推荐**:描述中提到这个效果归原创所有,因此在实际应用中,需要确保遵循适当的许可...

    Apple-page

    3. **结构元素**:为了使页面结构清晰,我们可以使用段落()、标题(至)、列表(, &lt;ol&gt;, )、引用()等元素。对于"Apple-page",可能需要有产品分类的标题(如&lt;h2&gt;iPhone,&lt;h2&gt;Mac)和详细的产品描述段落()。 ...

    JQ实现新浪游戏首页幻灯片

    - **`.Homeslide_bigwrap`**:包含主图片区域的包裹层。 - **`.Homeslide_hand0`** 和 **`.Homeslide_hand1`**:分别是左侧和右侧的切换按钮。 - **`.Homeslide_bigpicdiv_mask`**:用于遮罩的链接元素。 - **`....

    hbb0909.github.io-0909

    15. **网页性能**:考虑加载速度,优化图像大小,使用懒加载(`&lt;img loading="lazy"&gt;`)等技术,以及使用CDN(内容分发网络)加速资源加载。 综上所述,"hbb0909.github.io-0909"项目可能涵盖了HTML的基本概念和...

    starbucks:星巴克主站点示例

    为了提高加载速度和用户体验,星巴克可能会使用懒加载(lazy loading)技术,延迟非首屏内容的加载;通过压缩HTML、CSS和JavaScript文件,减小文件大小;并采用CDN(内容分发网络)加速静态资源的传输。 总结,...

    portfoliosSite

    5. **列表和表格**:`&lt;ul&gt;`,`&lt;ol&gt;`,`&lt;li&gt;`用于无序和有序列表,`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;td&gt;`用于创建数据表格。 6. **样式控制**:虽然"PortfoliosSite"标签只提及了HTML,但通常HTML会配合CSS(层叠样式表)来定义...

Global site tag (gtag.js) - Google Analytics