文档章节

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

木容木水
 木容木水
发布于 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
服务器出现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
Spring MVC Flash Attribute 的讲解与使用示例

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

qq58ef2349113e9
2017/04/13
0
0
HybridStart 发布 v1.0-beta,附开发纪要

自混合应用前端开发框架HybridStart v1.0升级计划开始后,经过近一周的开发测试,现已发布预览版,基本实现了最初定下的四个目标:核心易用、UI可剥离、开发模式清晰、开发体验优秀,这也是我...

特欧威尔
2017/07/10
835
1

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部