通过$.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实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- falsk sqlalchemy 自关联创建评论回复数据库
本项目在于创建类似微信上的评论回复功能的数据库 基类: from app import db from datetime import datetime class Basemadel(object) ...
- Eclipse报错:An internal error has occurred. Widget is disposed
win10家庭版报错. 右键Eclipse的快捷方式,在兼容性窗口的兼容模式中,将“以兼容模式运行这个程序”选项打对勾.选择win8就可以解决问题.
- 扩展运算符(spread)是三个点(…)
扩展运算符(spread)是三个点(…),将一个数组||类数组||字符串转为用逗号分隔的序列. js中用来对数组进行操作,把数组里面的东西统统拿出来 一.展开数组 //展开数组 let a = [1, ...
- murongxixi的凸优化笔记
http://www.cnblogs.com/murongxixi/p/3598645.html 在前两节里已经涉及到集合的相对内部与闭包的概念,这一节我们深入研究它们的性质和计算,之后介绍凸函数的连 ...
- 【数学建模】day11-典型相关分析
这与主成分分析有点相似. 0. 基本思想主成分分析(PCA)是把原始有相关性变量,线性组合出无关的变量(投影),以利用主成分变量进行更加有效的分析.而典型相关分析(CCA)的思想是: 分析自变量组 X ...
- django--orm表自关联详解
什么是表内自关联 表内自关联是指表内数据相关联的对象和表是相同字段,这样我们就直接用表内关联将外键关联设置成自身表的字段.同样表内关联也分一对多字段和多对多字段 例如:对于微博评论,每条评论都可能有子 ...
- Civil 3D 二次开发 新建CLR项目出现错误C2143
新建CLR项目出现错误C2143 按照Objectarx Training创建.net混合项目,编译时出现一下错误: 原因不明: 解决方法: 在Stdafx.h文件中添加: #define WIN32 ...
- Semi-prime H-numbers POJ - 3292 打表(算复杂度)
题意:参考https://blog.csdn.net/lyy289065406/article/details/6648537 一个H-number是所有的模四余一的数. 如果一个H-number是H ...
- 树莓派播放网络磁盘MP3文件
树莓派映射网络磁盘 sudo mount -t cifs -o username=jerry.huang,password=Hello2014 //10.10.0.1/Public/ESLPod.co ...
- 【hihocoder1167】高等理论计算机科学 (重链剖分 +树状数组)
Descroption 原题链接给你一棵\(~n~\)个点的树和\(~m~\)条链,求两两相交的链有多少对,两条链相交当且仅当有至少一个公共点.\(~1 \leq n, m \leq 10 ^ 5~\ ...