Ajax加载菊花loding效果

Ajax 异步请求的时候，一般都会利用一个动态的 gif小图片来制作一个Ajax Loading ，以便增加用户体验。

这里我们使用Spin.js ，该 js 脚本压缩后5k，可以不用任何图片，任何外部的CSS样式，就可以创建一个Ajax Loading 指示器

Spin.js 的在线设计、演示及下载地址为：http://fgnass.github.io/spin.js/

我们可以在链接页面中，动态设置样式同时会自动生成样式的配置脚本：

Spin.js 用法极其的简单：

显示 spinner

var target=document.getElementById("id")
 spinner.spin(target);

隐藏 spinner

spinner.spin();

我们来做一个简单完整的例子，来体验一次吧：

<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
//第一个参数为loading图标加载的标签，第二个为ajax的数据接口，第三个为回调函数。
function loadAjaxSpin(ele, get_url, callback) {
var opts = {
lines: 13, // 花瓣数目
 length: 20, // 花瓣长度
 width: 10, // 花瓣宽度
 radius: 30, // 花瓣距中心半径
 scale: 1,
corners: 1, // 花瓣圆滑度 (0-1)
 color: '#000', // 花瓣颜色
 opacity: 0.25,
rotate: 0, // 花瓣旋转角度
 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
 speed: 1, // 花瓣旋转速度
 trail: 60, // 花瓣旋转时的拖影(百分比)
 zIndex: 2e9, // spinner的z轴 (默认是2000000000)
 className: 'spinner', // spinner css 样式名称
 top: '50%', // spinner 相对父容器Top定位 单位 px
 left: '50%', // spinner 相对父容器Left定位 单位 px
 shadow: false, // 花瓣是否显示阴影
 hwaccel: false, //spinner 是否启用硬件加速及高速旋转
 position: 'absolute'
};
var spinner = new Spinner(opts);
$(ele).show();
var target = $(ele)[0];
spinner.spin(target);
$.ajax({
url: get_url,
dataType: 'html',
success: function(data) {
spinner.spin();
$(ele).hide();
callback(data);
}
})
}
var foo = function(data) {
console.log(data);
}
$(function() {
$('#btnRequest').on('click', function() {
loadAjaxSpin('.spin', 'http://192.168.1.191/h5/font.html', foo);
});
});
</script>
<div class="spin"></div>
<div>
<input id="btnRequest" type="button" value="请求数据" />
</div>

上面例子中，我们写了一个函数loadAjaxSpin，作用是ajax调用开始前 出现loading图标，数据加载完成后loading图标消失

效果：点击后显示出菊花，然后执行回调函数。

赞 (0)

相关推荐

  • Ajax loading gif generator

    http://ajaxload.info/ 生成loader动画一个网站

  • JS基于Ajax实现的网页Loading效果代码

    JS基于Ajax实现的网页Loading效果代码

    本文实例讲述了JS基于Ajax实现的网页Loading效果代码.分享给大家供大家参考,具体如下: 这是一款很不错的网页Loading效果,常用于Ajax交互式网页设计中,点击按钮即可弹出Loading框,若Loading框未加载完成时关闭网页,会弹出确认提示框,用于一些对安全性能要求高的网页交互处理中,比如付款操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/ 具体代码如下:

  • Ajax风格的一款网页Loading效果

    现在比较流行的一款Ajax风格的网页Loading,多见于一些大量使用Ajax技术的网站中,页面加载时会自动显示提示信息,带载入动画效果,网页加载完自动消失,是一款正在具有Loading功能的网页进度条. Loading body{background-color:#000;} #content{display:none;} #loadbox{position:absolute;top:50%;left:50%;margin-left:-68px;margin-top:-36px;width:2

  • MVC Ajax Helper或Jquery异步加载部分视图

    废话不多说了,直接给大家贴代码了. Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } public string Name { get; set; } } } 通过jQuery异步加载部分视图 Home/Index.cshtml视图中: @{ ViewBag.Title = "Index"; Layout = "~/Views/

  • dwz 如何去掉ajaxloading具体代码

    最近使用dwz来做项目,有时候在ajax的时候并不想使用dwz的loading. 所以就像去掉,很简单,只需要一行代码: 复制代码 代码如下: $.ajaxSettings.global=false; 将这行 代码加在ajax的前面就行了:下面是我的代码 复制代码 代码如下: $.ajaxSettings.global=false; $.getJSON(show.conf.url, show.conf.data, function(d) { });

  • Jquery ajax加载等待执行结束再继续执行下面代码操作

    Jquery等待ajax执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将 jquery ajax 函数的 async 参数设置为 false 即可,该参数默认为 true: $(document).ready(function(){ loadphpernote(); window.open('http://www.phpernote.com'); }); function loadphpernote(){ var url='http://www.phpernote.com/ajax.p

  • Ajax加载菊花loding效果

    Ajax加载菊花loding效果

    Ajax 异步请求的时候,一般都会利用一个动态的 gif小图片来制作一个Ajax Loading ,以便增加用户体验. 这里我们使用Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外部的CSS样式,就可以创建一个Ajax Loading 指示器 Spin.js 的在线设计.演示及下载地址为:http://fgnass.github.io/spin.js/ 我们可以在链接页面中,动态设置样式同时会自动生成样式的配置脚本: Spin.js 用法极其的简单: 显示 spinner v

  • Ajax全局加载框(Loading效果)的配置

    在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 实现原理: Jquery可以对ajax进行全局的设置,实现类似于C#中面向切面的效果,即对在Ajax提交之前和提交完成之后,我们均可以对其进行一系列的操作,所以我们可以在ajax开始的时候,把Loading框显示出来,在ajax请求完成之后,把loading框关闭掉,基本上就完美实现这个效果了. Jquery全局配置Ajax的方式为: $.ajaxS

  • Ajax加载外部页面弹出层效果实现方法

    本文实例讲述了Ajax加载外部页面弹出层效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

    本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • Android实现仿iOS菊花加载圈动画效果

    Android实现仿iOS菊花加载圈动画效果

    常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需要提供自定义属性,换肤时切换属性设置即可,比较灵活. 3.gif图普遍比较大,而且加载gif没有原生支持,需要引入第三方库,而且消耗内存比较大,不推荐. 效果图: 完整代码 自定义属性: <?xml version="1.0" encoding="utf-8"?&

  • 使用Bootstrap Tabs选项卡Ajax加载数据实现

    使用Bootstrap Tabs选项卡Ajax加载数据实现

    本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • 如何爬取通过ajax加载数据的网站

    如何爬取通过ajax加载数据的网站

    目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'https://www.toutiao.com/search/?keyword=美女' headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko

  • 解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/sysMenu/listSysMenu', autoParam: ["id=parentId"] } SpringMvc中文字符处理: Java代码 <mvc:annotation-driven> <mvc

随机推荐