通过$.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实现图片预加载的三大方法(转)
		
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
 
随机推荐
- python易混易乱(1)
			
字典 基础操作 <1>keys my_dict = {"name":"zhangsan","age":18} res = my_ ...
 - vue動畫和過渡
			
過渡: 插入.更新和溢出DOM時,提供不同的方式應用過渡效果: vue提供內置的封裝組件,用於包裹要實現過渡效果的內容. <transition name="a">&l ...
 - Android SDK Mirror
			
Android SDK Manager - Tools - Option - Proxy Settings - HTTP Proxy Server mirrors.zzu.edu.cn Force H ...
 - jdk6使用WebSocket
			
pom.xml <dependency> <groupId>org.java-websocket</groupId> <artifactId>Java- ...
 - python 项目目录结构
			
目录组织方式 关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结构.在Stackoverflow的这个问题上,能看到大家对Python目录结构的讨论. 这里面说的已经很好了, ...
 - Codeforces Round #542 Div. 1
			
A:显然对于起点相同的糖果,应该按终点距离从大到小运.排个序对每个起点取max即可.读题花了一年还wa一发,自闭了. #include<iostream> #include<cstd ...
 - 【XSY2701】异或图 线性基 容斥原理
			
题目描述 定义两个图\(G_1\)与\(G_2\)的异或图为一个图\(G\),其中图\(G\)的每条边在\(G_1\)与\(G_2\)中出现次数和为\(1\). 给你\(m\)个图,问你这\(m\)个 ...
 - MT【300】余弦的三倍角公式
			
2017清华大学THUSSAT附加学科测试数学(二测)$\cos^5\dfrac{\pi}{9}+\cos^5\dfrac{5\pi}{9}+\cos^5\dfrac{7\pi}{9}$ 的值为___ ...
 - zabbix 自定义 nginx 监控模板
			
打开zabbix首页→配置→模板→创建模板模板名称:Template App NGINXagent 需添加自定义监控项:UserParameter=nginx.status[*],/bin/bash ...
 - 在 CentOS 上编写 init.d service script [转]
			
背景:之前编写了一些脚本,下载了一些开源软件,想把它们做成系统服务,通过 service your_prog_name start 这样的方式来后台运行,并在开机时自动启动.在了解了 daemon 命 ...