文档章节

打开新页面,在请求数据成功前显示“正在加载”

木容木水
 木容木水
发布于 2017/07/07 09:57
字数 361
阅读 7
收藏 0

从A页面打开B页面,B页面为一个需要从服务端加载的列表页面,若在B页面loaded事件发生时就将其显示出来,因服务器数据尚未加载完毕,列表页面为空,用户体验不好;可通过如下方式改善用户体验(最好的用户体验应该是通过预加载的方式):第一步,B页面loaded事件发生后,不自动显示;

第一步,B页面loaded事件发生后,不自动显示;
mui.openWindow({
url: ‘B.html’,
show:{
autoShow:false
}
});
第二步,在B页面获取列表数据后,再关闭等待框、显示B页面

//B页面onload从服务器获取列表数据;
window.onload = function(){
//从服务器获取数据
….
//业务数据获取完毕,并已插入当前页面DOM;
//注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
}
例如:B 页面首先是使用ajax请求数据。则把 mui.plusReady() 写在请求成功后。

mui.ajax(apiurl + ‘/api/index/lists’, {
dataType: ‘json’, //服务器返回json格式数据
type: ‘post’, //HTTP请求类型
success: function(data) {
console.log(JSON.stringify(data));
itemList.mylist = eval(“(” + JSON.stringify(data.data) + “)”);
mui.plusReady(function() {
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
},
error: function(xhr, type, errorThrown) {
mui.plusReady(function() {
plus.nativeUI.toast(‘服务器连接失败,请稍后再试’);
});
}
});

© 著作权归作者所有

共有 人打赏支持
木容木水
粉丝 0
博文 10
码字总数 1914
作品 0
广州
后端工程师
私信 提问
JQuery中ajax的相关方法

前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦。 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 具体方法 ①load(......

LuckyWinty
2016/03/15
196
0
HTTP请求状态及jQuery AJAX请求异常处理

上一周调优一个项目的Js部分,其中一个严重的问题就是在页面初始化数据时,没有对异常进行处理, 导致Loading一直在等待中,无提示无处理。在用户体验上很不好,即使网络条件无法保证,在出错...

临江仙卜算子
06/22
0
0
Spring MVC Flash Attribute 的讲解与使用示例

Spring MVC 3.1版本加了一个很有用的特性,Flash属性,它能解决一个长久以来缺少解决的问题,一个POST/Redirect/GET模式问题。 正常的MVC Web应用程序在每次提交都会POST数据到服务器。一个正...

qq58ef2349113e9
2017/04/13
0
0
服务器出现HTTP400、401、402、403错误原因及解决方法

HTTP 400 - 请求无效 HTTP 401.1 - 未授权:登录失败 HTTP 401.2 - 未授权:服务器配置问题导致登录失败 HTTP 401.3 - ACL 禁止访问资源 HTTP 401.4 - 未授权:授权被筛选器拒绝 HTTP 401.5...

尐桀
2012/01/02
0
0
百度网盘不限速下载 Chrome 插件 1.1.0 兼容苹果系统

这是一款获取百度网盘下载直链的开源 Chrome 插件,获取到直链后你可以使用迅雷下载以达到不限速的目的。 该版本主要去除了挖矿,并兼容了苹果系统提取链接。 安装 下载 zip 包解压 在 Chro...

88250
04/02
9.3K
35

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部