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

如何快速创建一个AJAX的"加载"的图片效果

阅读更多

日期:2011/11/06  来源:GBin1.com

 

开发过AJAX的朋友都可能需要自己生成"加载中”的图片显示效果,用来提示用户当前操作正在处理中。这里GBin1.com 提供一个快速的方法生成这种效果。

你只需要使用ajaxStart和ajaxStop方法,你可以将整个页面的ajax方法都加上“加载中”效果。如下:

在线演示

Javascript代码:

<script type="text/javascript">
$(document).ready(function () {
$('#loading')
    .hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
});
</script> 

以上自动将实现ajax的loading效果

 

原文来自: 如何快速创建一个AJAX的"加载"的图片效果

分享到:
评论

相关推荐

    以AJAX方式加载图片=异步加载图片,先显示个图片的占位图片 此技术常见于漫画网站.zip

    这可以通过遍历图片列表,对每个图片执行上述的`window.Image()`创建和加载过程。 至于“lj源码”,可能是指某种特定的代码示例或开源项目,但没有提供具体信息,所以无法详细展开。不过,它可能与上述的异步加载...

    ajax图片框显示图片的加载进度Demo

    总的来说,这个Demo提供了一个实用的方法来优化图片加载体验,通过显示加载进度,开发者可以创建更流畅、更互动的网页应用。对于任何涉及到大量图片加载的项目,这都是一个值得参考和学习的实践案例。

    AJAX加载图标大全

    AJAX加载图标,顾名思义,是在进行AJAX请求时显示的一种视觉反馈,通常是一个动态的或者静态的图形,用来告知用户系统正在进行后台操作,请求尚未完成。这些图标设计得既美观又具有功能性,可以是简单的旋转圆圈、小...

    jquery实现图片延迟加载和ajax方式加载页面

    通过Ajax加载,我们可以将整个页面分割为多个模块,每个模块独立加载,从而提高页面响应速度,减少用户等待时间。 结合图片延迟加载和Ajax页面加载,我们可以创建更高效的网页。例如,对于营销型单页面,可以先加载...

    带搜索过滤ajax加载下拉框代码.zip

    "带搜索过滤ajax加载下拉框代码.zip"提供的解决方案正针对这一需求,它是一个基于jQuery的插件,旨在提升用户体验,使得在大型数据集中的选择和查找过程更加便捷。 首先,这个插件的核心功能是**搜索过滤**。它允许...

    jQuery焦点图效果图片延迟加载

    jQuery焦点图效果图片延迟加载就是这种技术的一个实例,它结合了jQuery库和焦点图的特性,实现了一个高效、动态的图片展示方案。 首先,jQuery是一个轻量级的JavaScript库,它的易用性和强大的DOM操作能力使得开发...

    图片预加载特效

    5. **预加载列表**:创建一个图片列表,按照优先级进行预加载,重要的图片优先加载。 在实际应用中,我们可能会结合使用这些策略,以达到最佳的预加载效果。比如,可以先预加载首页的重要图片,然后在用户交互时...

    PHP+Ajax点击加载更多内容 -效果好,速度快,带图片加载和跳转链接 加载最后一页更多变成文字变没记录

    通过PHP后端处理数据分页,Ajax前端异步加载,以及JavaScript动态更新DOM,实现了快速加载内容、图片和链接的功能,同时在加载到最后一页时,能够优雅地处理"加载更多"按钮,提升了整体的用户体验。对于开发者而言,...

    ajax动态加载树,支持动态刷新

    总结起来,利用Ajax和dhtmlx库,我们可以创建一个功能丰富的动态树形结构,支持右键菜单、复选框、拖拽和排序,同时能够灵活地处理json和xml格式的数据。这不仅提高了交互性,也优化了性能,为用户提供了一种高效且...

    php+ajax 图片管理

    总的来说,"php+ajax 图片管理"系统是Web开发中一种实用的应用实例,它结合了PHP的后端处理能力和AJAX的前端交互性,为图片的存储、检索和展示提供了一个高效且用户友好的平台。对于学习PHP和AJAX的开发者而言,这是...

    mui上拉加载+选项卡+ajax

    总的来说,这个`mui`示例结合了上拉加载、选项卡和`ajax`,展示了如何利用这些技术创建一个动态、交互性强的H5页面。开发者可以通过研究这些文件,学习如何在实际项目中应用类似的功能。同时,注意`mui`框架的文档和...

    php加载和生成json和生成xml文件,并带有ajax分页效果,带图带数据库

    以ThinkPHP框架为例,可以创建一个控制器方法来处理分页请求,使用`paginate()`函数进行分页,然后返回JSON数据供前端使用。前端通过jQuery的AJAX方法发送请求,获取分页数据并渲染到页面上。 在数据库方面,PHP...

    ajax无刷新换图片

    5. **更新DOM**:解析JSON数据后,获取新的图片URL,然后创建一个新的`&lt;img&gt;`元素,设置其`src`属性为新URL。最后,使用DOM操作方法(如`appendChild()`或`replaceChild()`)将新的图片元素插入或替换原有的图片元素...

    jQuery无限级ajax加载菜单代码.zip

    【jQuery无限级ajax加载菜单代码】是一个用于创建动态、多级菜单的JavaScript解决方案,它利用了流行的jQuery库和Ajax技术。这个代码的核心在于其能够异步地从服务器获取JSON数据,然后根据这些数据构建出一个可扩展...

    asp图片管理系统类似网易图片浏览页面ajax+image无刷新图片缓存预加载

    总结来说,这个ASP图片管理系统结合了Ajax技术、图片预加载、数据库操作和第三方组件,构建了一个高效、用户友好的图片浏览和管理平台。对于IT专业人士而言,理解和掌握这些技术对开发类似的应用至关重要。

    ajax异步图片上传和裁剪插件

    总的来说,"Ajax异步图片上传和裁剪插件"是一个强大的工具,能够帮助开发者快速实现图片上传和裁剪功能,提升网站的交互性和用户体验。通过深入理解其原理和使用方法,我们可以灵活地应用于各种Web项目中。

    ajax 批量上传图片源码

    在IT领域,Ajax(Asynchronous JavaScript and XML)技术是一种用于创建快速、动态网页的重要方法。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,从而提升了用户体验。批量上传图片...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    综上所述,结合ASP.NET、jQuery和AJAX,我们可以创建一个动态的下拉列表控件,当用户滚动滚动条时,数据会自动按需加载。这提高了用户界面的响应性,提升了用户体验。在实现过程中,注意合理设计数据加载机制,以...

    纯CSS3的ajax loading加载.zip

    通常,一个Ajax加载指示器会包含一个div元素,用于承载动画效果。例如: ```html &lt;div class="loading"&gt;&lt;/div&gt; ``` 接下来,我们使用CSS3来定义这个加载指示器的样式。我们可以利用伪类`:before`或`:after`来添加...

    jQuery网页图片延迟加载代码.zip

    为了实现预加载效果,可以在图片真正加载之前显示一个占位符或者加载指示器,让用户知道图片正在加载。这可以通过CSS样式和JavaScript配合实现,例如设置一个占位图片或定义一个加载中的动画。 此外,为了提高性能...

Global site tag (gtag.js) - Google Analytics