通过$.ajax设置预加载动画加强用户体验
以前在jquery请求数据时,总喜欢用简洁的$.get与$.post提交数据,但有时发现由于网速的问题,有些时候网站加载js获得的数据会非常慢,于是就想能不能请求数据中间,给加载数据一个提示,增加用户体验。详细阅读了$.ajax的用法,觉得这个很合适,于是记录下来,以供参考:
示例:
$.ajax({
url:url,
type:'get',
dataType: "json",
beforeSend: function () {
$("body").append('<div id="pload" style="position:fixed;top:30%;z-index:1200;background:url(/wap/images/loading.gif) top center no-repeat;width:100%;height:140px;margin:auto auto;"></div>');
},
complete: function () {
$("#pload").remove();
},
success:function(result){
上面使用beforeSend方法开始发送数据时在页面正中显示加载动画。当请求结束时使用complete方法结束加载提示
效果如下:

通过$.ajax设置预加载动画加强用户体验的更多相关文章
- CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- jQuery实现图片预加载提高页面加载速度和用户体验
我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...
- IIS初始化设置预加载,解决程序池被回收第一次访问慢问题
问题现象: 部署到IIS上的项目,第一次访问比较慢,有时后空闲一段时间去访问也会很慢,经常隔天访问也会慢.这就是IIS回收导致的问题,IIS回收把程序池的内存释放,网站就相当与重启的状态,被回收后,我 ...
- 前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
- viewpager 设置预加载项
live_pager.setOffscreenPageLimit(3); 防止viewpager 左右滑动 fragment消失
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 如何使用SVG生成超酷的页面预加载素描动画效果
在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- 数据库迁移(创建关联等操作) Target database is not up to date报错
使用Mysql-sqlalchemy执行数据库迁移 来更新数据库: 队长试探性的在网上找了几种方案 依然没有解决报错问题: 后来看了https://www.aliyun.com/jiaocheng/4 ...
- 使用javaWeb的二大(Listener、Filter)组件实现分IP统计访问次数
分析: 统计工作需要在所有资源之前都执行,那么就可以放到Filter中. 我们这个过滤器不打算做拦截操作!因为我们只是用来做统计 用什么东西来装载统计的数据.Map<String,Integer ...
- web跨域请求
第一种情况: 1. sina.com=====>baidu.com/xxx.jsp 也就是前面的域名不相同,(url第三根斜杠之前的内容,也就是主机) 2:localhost =====> ...
- git reset 版本回退的三种用法总结
git reset (–mixed) HEAD~1 回退一个版本,且会将暂存区的内容和本地已提交的内容全部恢复到未暂存的状态,不影响原来本地文件(未提交的也不受影响) git reset –soft ...
- 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构
前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构
- java数据库导入excel数据
导入数据会将表格分为xls和xlsx两种格式,网上有很多案例 1.excel数据表中的数据不全,数据库中又是必填选项:---从sql语句入手:判断有无 来改变语句 //设置可有可无 字段 加一个必有字 ...
- 51-nod(1443)(最短路)
解题思路:最短路+记录前驱和,刚开始一直以为是最短路+MST,结果发现,因为无向图的原因,有些边权很小的边再最短路处理后可能这条边也符合某两个点的最短路径,所以我们觉得这条边也是可以在MST处理中使用 ...
- 找工作的程序员必懂的Linux
一.为什么要学习Linux 首先,我想先说一下:“为什么要学习Linux”?Linux 是什么,它是一款操作系统,是一个支持多用户.多任务.支持多线程和多CPU的操作系统:32位和64位的硬件可以在L ...
- mysql,mybatis模糊查询
<if test="deviceType != null and deviceType != ''">and device_type like CONCAT('%', ...
- BZOJ4946[Noi2017]蔬菜——线段树+堆+模拟费用流
题目链接: [Noi2017]蔬菜 题目大意:有$n$种蔬菜,每种蔬菜有$c_{i}$个,每种蔬菜每天有$x_{i}$个单位会坏掉(准确来说每天每种蔬菜坏掉的量是$x_{i}-$当天这种蔬菜卖出量), ...