个人网站可以做淘宝客,好的营销网站设计公司,设计上海展会2021时间,建设企业网银如何对账Ajax 异步请求的时候#xff0c;一般都会利用一个动态的 gif小图片来制作一个Ajax Loading #xff0c;以便增加用户体验。这里我们使用Spin.js #xff0c;该 js 脚本压缩后5k#xff0c;可以不用任何图片#xff0c;任何外部的CSS样式#xff0c;就可以创建一个Ajax Lo…Ajax 异步请求的时候一般都会利用一个动态的 gif小图片来制作一个Ajax Loading 以便增加用户体验。这里我们使用Spin.js 该 js 脚本压缩后5k可以不用任何图片任何外部的CSS样式就可以创建一个Ajax Loading 指示器我们可以在链接页面中动态设置样式同时会自动生成样式的配置脚本Spin.js 用法极其的简单显示 spinnervar targetdocument.getElementById(id)spinner.spin(target);隐藏 spinnerspinner.spin();我们来做一个简单完整的例子来体验一次吧//第一个参数为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定位 单位 pxleft: 50%, // spinner 相对父容器Left定位 单位 pxshadow: 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);});});上面例子中我们写了一个函数loadAjaxSpin作用是ajax调用开始前 出现loading图标数据加载完成后loading图标消失效果点击后显示出菊花然后执行回调函数。时间 2016-07-22
