ajax 滚动加载 缓存,Ajax实现加载缓存的loding效果
这次给大家带来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 用法极其的简单:
显示 spinnervar target=document.getElementById("id")
spinner.spin(target);
隐藏 spinner
spinner.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定位 单位 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);
});
});
上面例子中,我们写了一个函数loadAjaxSpin,作用是ajax调用开始前 出现loading图标,数据加载完成后loading图标消失
效果:点击后显示出菊花,然后执行回调函数。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
ajax 滚动加载 缓存,Ajax实现加载缓存的loding效果相关推荐
- js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
转载链接:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配 ...
- ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- 滑轮滚动到页面底部ajax加载数据的实例
滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的j ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- ajax加载对应的json,jQuery:多个AJAX/JSON请求对应单个回调并行加载
因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...
- jQuery Mobile 手动显示ajax加载器,提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- php ajax 加载列表,Ajax点击不断加载数据列表(图文教程)
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...
- ajax响应不显示值,Ajax响应200正常,但显示未能加载响应数据
我正在对后端休息api进行ajax调用,api返回正常.如果我console.log()成功的数据和错误数据,它会给控制台上的"资源登录",200确定,但当我在网络选项卡响应中查看 ...
最新文章
- C++中 public,protected, private 访问标号小结
- php数组实现堆栈的三个函数,while,do while,s函数的参数作用域,数组堆栈,常见的数组函数等学习2018/8/23...
- vue-music(1)音乐播发器 项目开发记录
- 使用C语言进行面向对象的开发--GObject入门[2]
- 【收藏】怎样把 macOS 安装在移动硬盘或 U 盘里
- Java 斐波那契数列
- mysql中合并函数_MYSQL分组合并函数
- 谈谈C#中的三个关键词new , virtual , override(装载 Winner.Net)
- mt4 python神经网络_迈达克软件公司承认Python运算对量化交易的重要性----将Python与Metatrader 5集成一体...
- 二分法(三):采用二分法解决“最大化最小值问题”
- iPhone开发内存管理
- CNBlog客户端--第一阶段记录
- 红宝书第四版的一个错误?
- GAN网络笔记 MATLAB实现
- 类图和对象图(用户管理模块建模)
- li指令 汇编_51单片机(九)汇编指令
- 台式计算机怎么加一个硬盘,如何给台式机添加硬盘?给电脑添加硬盘的方法
- MySQL语句—DDL语句
- 奥利给:力扣160:相交链表
- C++求1000以内水仙花数