以前在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. oldriver

    功能: 1:数据详情:统计商家所关联邮箱的商家店铺的当天或者最近一周,最近一个月的订单情况,sku,order,value,回评率数据在具体哪个国家的销售情况. 增强版提供更丰富的数据详情和自定义功能 ...

  2. 如何在虚拟机下配置centOS7

    链接地址:https://baijiahao.baidu.com/s?id=1597320700700593557&wfr=spider&for=pc

  3. 51nod 1503 猪和回文(dp滚存)

    题面 大意:在一个n*m的矩形中从(1,1)走到(n,m)而且走过的路径是一条回文串,统计方案数 sol:我们考虑从(1,1)和(n,m)两端开始算,这样就只要保证每次经过的字符一样就可以满足回文了, ...

  4. Nginx 简单的cpu配置

    配置指定CPU Nginx建议进程数和CPU数量一致,这样每个CPU都有自己独立的缓存 worker_processes 4; worker_cpu_affinity 1000 0100 0010 0 ...

  5. HTC Vive 基础入门 基于Unity3D引擎

    任务2: 01-概述 07:08 任务3: 02-HTC Vive设备的安装 08:33 任务4: 03-下载Steam与SteamVR 03:05 任务5: 04-使用Steam VR 调试设备 1 ...

  6. 添加一个Android框架层的系统服务与实现服务的回调

    2017-10-09 概述 所谓Android系统服务其本质就是一个通过AIDL跨进程通信的小Demo的延伸而已.按照 AIDL 跨进程通信的标准创建一套程序,将服务端通过系统进程来运行实现永驻内存, ...

  7. BZOJ3438小M的作物——最小割

    题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子 有1个(就是可以种一棵作物)(用1...n编号),现在,第i种作物种植在A中种植可 ...

  8. HDU1506 Largest Rectangle in a Histogram(算竞进阶习题)

    单调栈裸题 如果矩形高度从左到右是依次递增,那我们枚举每个矩形高度,宽度拉到最优,计算最大面积即可 当有某个矩形比前一个矩形要矮的时候,这块面积的高度就不能大于他本身,所以之前的所有高于他的矩形多出来 ...

  9. centos6.8下安装破解quartus prime16.0以及modelsim ae安装

    前言 装逼使用 流程 安装modelsim: 1.modelsim ae在linux下是32位的,对于64位系统需要安装32位库:yum install xulrunner.i686 2.给予权限: ...

  10. IDEA修改module的名字

    首先右键module名,选择[Refactor]-[Rename...] 然后选择[Rename module] 只修改这些对于当前开发是没有问题了 但是刚开始把module添加成maven项目的时候 ...