以前在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设置预加载动画加强用户体验的更多相关文章

  1. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  2. jQuery Pjax – 页面无刷新加载,优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  3. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  4. IIS初始化设置预加载,解决程序池被回收第一次访问慢问题

    问题现象: 部署到IIS上的项目,第一次访问比较慢,有时后空闲一段时间去访问也会很慢,经常隔天访问也会慢.这就是IIS回收导致的问题,IIS回收把程序池的内存释放,网站就相当与重启的状态,被回收后,我 ...

  5. 前端如何实现图片懒加载(lazyload) 提高用户体验

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...

  6. viewpager 设置预加载项

    live_pager.setOffscreenPageLimit(3); 防止viewpager 左右滑动 fragment消失

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 如何使用SVG生成超酷的页面预加载素描动画效果

    在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. Java使用RabbitMQ之整合Spring(生产者)

    依赖包 <!--RabbitMQ集成spring--> <!-- https://mvnrepository.com/artifact/org.springframework.amq ...

  2. [51Nod 1584] 加权约数和

    Description 在整理以前的试题时,他发现了这样一道题目:"求 \(\sum\sigma(i)\),其中 \(1≤i≤N\),\(σ(i)\) 表示 \(i\) 的约数之和.&quo ...

  3. CodeForces512C-Pluses everywhere-模拟/数学/排列组合模板

    经过研究可以发现,每一位的贡献是C(n-2,k-1)+C(n-3,k-1)...C(k-1,k-1) 同时还要注意加号全部在左边的情况. 这里还用了O(n)预处理O(1)组合数的模板.//妙啊..妙. ...

  4. 抓包工具Fiddler的使用说明

    软件介绍 Fiddler是一个C#实现的浏览器抓包和调试工具,fiddler启用后作为一个proxy存在于浏览器和服务器之间,从中监测浏览器与服务器之间的http/https级别的网络交互.目前可以支 ...

  5. Biorhythms POJ - 1006 中国剩余定理

    定理证明:https://blog.csdn.net/d_x_d/article/details/48466957 https://blog.csdn.net/lyy289065406/article ...

  6. LOJ2116 [HNOI2015] 开店 【点分治】

    题目分析: 观察题目发现度数不小于三,考虑从边分治入手,用点分治代替.将树划分成重心链接的结构,称为点分树.令当前询问的点为$ u $.那么我们考虑点分树的根到$ u $的一条路径.考虑根结点,排除掉 ...

  7. django 配置邮件发送 send_email

    导入 send_email 所用方法导入 from django.core.mail import send_mail 因为使用的需要指明 发送人 所以要把 setting.py 中的 EMAIL_F ...

  8. 【SPOJ】Power Modulo Inverted(拓展BSGS)

    [SPOJ]Power Modulo Inverted(拓展BSGS) 题面 洛谷 求最小的\(y\) 满足 \[k\equiv x^y(mod\ z)\] 题解 拓展\(BSGS\)模板题 #inc ...

  9. 【BZOJ4008】[HNOI2015]亚瑟王(动态规划)

    [BZOJ4008][HNOI2015]亚瑟王(动态规划) 题面 BZOJ 洛谷 题解 设\(f[i][j]\)表示前\(i\)张卡中有\(j\)张被触发的概率. 分两种情况转移,即当前这张是否被触发 ...

  10. vue自定义插件-弹框

    <template> <transition name="msgbox"> <div v-if="show" class=&quo ...