CN110704765B - 页面过渡效果实现方法 - Google Patents

页面过渡效果实现方法 Download PDF

Info

Publication number
CN110704765B
CN110704765B CN201910923775.9A CN201910923775A CN110704765B CN 110704765 B CN110704765 B CN 110704765B CN 201910923775 A CN201910923775 A CN 201910923775A CN 110704765 B CN110704765 B CN 110704765B
Authority
CN
China
Prior art keywords
page
interface
transition
interface access
monitoring
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910923775.9A
Other languages
English (en)
Other versions
CN110704765A (zh
Inventor
裴晓格
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Changhong Electric Co Ltd
Original Assignee
Sichuan Changhong Electric Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sichuan Changhong Electric Co Ltd filed Critical Sichuan Changhong Electric Co Ltd
Priority to CN201910923775.9A priority Critical patent/CN110704765B/zh
Publication of CN110704765A publication Critical patent/CN110704765A/zh
Application granted granted Critical
Publication of CN110704765B publication Critical patent/CN110704765B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Abstract

本发明涉及网页显示技术，解决了目前通过页面过渡效果无法得知页面打开工作所处阶段，用户难以决定是继续等待还是关闭页面的问题。技术方案为：页面过渡效果实现方法：接收到打开新页面指令后，初始化当前接口访问数量为0，然后显示接口访问过渡页面，并实时监测当前接口访问数量，然后执行打开新页面指令，并实时监听新增的接口请求以及实时监听接口响应，每监听到一个新增的接口请求，当前接口访问数量加1，每监听到一个接口响应，当前接口访问数量减1；若监测到当前接口访问数量由大于0的数变为0，则移除接口访问过渡页面。有益效果是：用户能够通过页面过渡效果知道页面打开工作所处阶段，进而辅助用户决定是继续等待还是关闭页面。

Description

页面过渡效果实现方法
技术领域
本发明涉及网页显示技术，特别涉及在网页跳转时实现过渡效果的技术。
背景技术
在网页跳转过程中，现有技术通过监听新页面的页面加载完成事件来实现页面过渡效果，即未监听到页面加载完成事件时，显示一个过渡页面，监听到页面加载完成事件时，移除该过渡页面。打开新页面时，需要先请求相应的接口以从服务器获取相关数据，然后再对获取到的数据进行加载以显示出页面内容。现有技术中通过监听页面加载完成事件来实现页面过渡效果，页面过渡效果单一，用户无法通过页面过渡效果了解到页面打开工作进行到哪一个阶段，进而在等待页面打开时，难以决定是继续等待还是关闭页面。
发明内容
本发明为解决现有页面过渡效果单一，用户无法通过页面过渡效果了解到页面打开工作进行到哪一个阶段，进而在等待页面打开时，难以决定是继续等待还是关闭页面的问题，提供一种页面过渡效果实现方法。
为解决上述问题，本发明采用的技术方案是：页面过渡效果实现方法，包括：
接收到打开新页面指令后，初始化当前接口访问数量为0，然后显示出预设的接口访问过渡页面，并实时监测当前接口访问数量，然后执行打开新页面指令，并实时监听新增的接口请求以及实时监听接口响应，每监听到一个新增的接口请求时，当前接口访问数量加1，每监听到一个接口响应时，当前接口访问数量减1；
若监测到当前接口访问数量由大于0的数变为0，则移除显示的接口访问过渡页面。
作为进一步优化，若监测到当前接口访问数量由大于0的数变为0，还显示出预设的页面加载过渡页面，并监听页面加载完成事件，若监听到页面加载完成事件，则移除显示的页面加载过渡页面。
作为进一步优化，基于Vue.js框架进行开发，执行打开新页面指令时，在Vue.js生命周期中的created阶段进行接口请求。
作为进一步优化，执行打开新页面指令时，通过Axios进行接口请求。
作为进一步优化，通过Axios设置接口请求拦截器来实时监听新增的接口请求，通过Axios设置接口响应拦截器来实时监听接口响应。
作为进一步优化，显示接口访问过渡页面时，采用HTML和CSS绘制接口访问过渡页面，通过将接口访问过渡页面的z-index值设置为最高以显示出接口访问过渡页面。
有益效果是：本申请通过监听接口请求和接口响应来判断打开新页面时相关数据的获取情况，并设置接口访问过渡页面，在请求接口的过程中显示接口访问过渡页面，所有请求的接口都得到响应后，移除接口访问过渡页面，使用户能够通过页面过渡效果了解到打开网页时，相关的数据是否获取完成，页面打开工作当前所处的阶段，进而辅助用户决定是继续等待还是关闭页面，比如用户在跳转网页时，显示界面一直停留在接口访问过渡页面，这时用户在确认设备网络完好的情况下，可以推知有极大可能是服务器异常，无法响应接口请求，那么用户就可以关闭网页，不必作无谓的等待。
具体实施方式
下面详细说明本发明的技术方案。
本发明的技术方案是：
页面过渡效果实现方法，包括：接收到打开新页面指令后，初始化当前接口访问数量为0，然后显示出预设的接口访问过渡页面，并实时监测当前接口访问数量，然后执行打开新页面指令，并实时监听新增的接口请求以及实时监听接口响应，每监听到一个新增的接口请求时，当前接口访问数量加1，每监听到一个接口响应时，当前接口访问数量减1；若监测到当前接口访问数量由大于0的数变为0，则移除显示的接口访问过渡页面。
对上述方法进行进一步的优化，具体可以是：
一方面，若监测到当前接口访问数量由大于0的数变为0，还可以显示出预设的页面加载过渡页面，并监听页面加载完成事件，若监听到页面加载完成事件，则移除显示的页面加载过渡页面。当监测到当前接口访问数量由大于0的数变为0时，表示所有请求的接口都已得到响应，这时移除显示的接口访问过渡页面，并显示出预设的页面加载过渡页面，让用户知道页面打开工作已经进行到了页面加载阶段，如果用户已经等待了较长的时间，但鉴于目前已经在加载页面，用户可以推知再等待少许时间即可打开页面，那么用户一般会继续进行等待。
一方面，上述方法可以基于Vue.js框架进行开发，执行打开新页面指令时，在Vue.js生命周期中的created阶段进行接口请求。Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，与传统的框架相比Vue.js的核心库只关注视图层，非常容易与其它库或已有项目整合。
一方面，执行打开新页面指令时，可以通过Axios进行接口请求。可以通过Axios设置接口请求拦截器来实时监听新增的接口请求，通过Axios设置接口响应拦截器来实时监听接口响应。Axios作为一款基于Promise对象的HTTP，能够进行接口请求以及设置请求和响应拦截器，通过Axios能够方便地获取到相应页面的接口的访问情况，在Vue.js中，可以通过npm引入Axios，再通过Prototype原型定义全局使用的方法，完成网页的接口访问的初始设置。
一方面，显示接口访问过渡页面时，可以采用HTML和CSS绘制接口访问过渡页面，通过将接口访问过渡页面的z-index值设置为最高以显示出接口访问过渡页面。

Claims (5)

1.页面过渡效果实现方法，其特征在于，包括：
接收到打开新页面指令后，初始化当前接口访问数量为0，然后显示出预设的接口访问过渡页面，并实时监测当前接口访问数量，然后执行打开新页面指令，并实时监听新增的接口请求以及实时监听接口响应，每监听到一个新增的接口请求时，当前接口访问数量加1，每监听到一个接口响应时，当前接口访问数量减1；
若监测到当前接口访问数量由大于0的数变为0，则移除显示的接口访问过渡页面；
若监测到当前接口访问数量由大于0的数变为0，还显示出预设的页面加载过渡页面，并监听页面加载完成事件，若监听到页面加载完成事件，则移除显示的页面加载过渡页面。
2.如权利要求1所述的页面过渡效果实现方法，其特征在于，基于Vue.js框架进行开发，执行打开新页面指令时，在Vue.js生命周期中的created阶段进行接口请求。
3.如权利要求1所述的页面过渡效果实现方法，其特征在于，执行打开新页面指令时，通过Axios进行接口请求。
4.如权利要求1所述的页面过渡效果实现方法，其特征在于，通过Axios设置接口请求拦截器来实时监听新增的接口请求，通过Axios设置接口响应拦截器来实时监听接口响应。
5.如权利要求1所述的页面过渡效果实现方法，其特征在于，显示接口访问过渡页面时，采用HTML和CSS绘制接口访问过渡页面，通过将接口访问过渡页面的z-index值设置为最高以显示出接口访问过渡页面。
CN201910923775.9A 2019-09-27 2019-09-27 页面过渡效果实现方法 Active CN110704765B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910923775.9A CN110704765B (zh) 2019-09-27 2019-09-27 页面过渡效果实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910923775.9A CN110704765B (zh) 2019-09-27 2019-09-27 页面过渡效果实现方法

Publications (2)

Publication Number Publication Date
CN110704765A CN110704765A (zh) 2020-01-17
CN110704765B true CN110704765B (zh) 2022-04-12

Family

ID=69196698

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910923775.9A Active CN110704765B (zh) 2019-09-27 2019-09-27 页面过渡效果实现方法

Country Status (1)

Country Link
CN (1) CN110704765B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102055623A (zh) * 2010-12-08 2011-05-11 深圳市茁壮网络股份有限公司 实现嵌入式浏览器自动测试的方法及系统
CN103530329A (zh) * 2013-09-27 2014-01-22 北京奇虎科技有限公司 一种进行网页加载的方法、装置和浏览器
CN104571877A (zh) * 2015-01-16 2015-04-29 天脉聚源(北京)传媒科技有限公司 一种页面的显示处理方法及装置
CN107526579A (zh) * 2016-06-22 2017-12-29 中兴通讯股份有限公司 一种应用程序页面开发管理方法及装置
CN107850972A (zh) * 2015-07-17 2018-03-27 苹果公司 动态的动态静图展示
CN108536832A (zh) * 2018-04-12 2018-09-14 江南大学 一种页面切换智能动画效果应用方法及系统
CN109284458A (zh) * 2018-09-28 2019-01-29 平安普惠企业管理有限公司 网页显示方法、装置、计算机设备及存储介质

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7966572B2 (en) * 2004-02-20 2011-06-21 Microsoft Corporation User interface transition
US7490295B2 (en) * 2004-06-25 2009-02-10 Apple Inc. Layer for accessing user interface elements

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102055623A (zh) * 2010-12-08 2011-05-11 深圳市茁壮网络股份有限公司 实现嵌入式浏览器自动测试的方法及系统
CN103530329A (zh) * 2013-09-27 2014-01-22 北京奇虎科技有限公司 一种进行网页加载的方法、装置和浏览器
CN104571877A (zh) * 2015-01-16 2015-04-29 天脉聚源(北京)传媒科技有限公司 一种页面的显示处理方法及装置
CN107850972A (zh) * 2015-07-17 2018-03-27 苹果公司 动态的动态静图展示
CN107526579A (zh) * 2016-06-22 2017-12-29 中兴通讯股份有限公司 一种应用程序页面开发管理方法及装置
CN108536832A (zh) * 2018-04-12 2018-09-14 江南大学 一种页面切换智能动画效果应用方法及系统
CN109284458A (zh) * 2018-09-28 2019-01-29 平安普惠企业管理有限公司 网页显示方法、装置、计算机设备及存储介质

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
Transitional Interfaces, Coded;Chris Coyier;《https://css-tricks.com/transitional-interfaces-coded/》;20130411;1-9 *
vue中用axios拦截器拦截请求和响应;于五五;《https://juejin.cn/post/6844903568160325645》;20180228;1 *
用JS检测页面加载的不同阶段状态;Frank_Lei;《https://www.cnblogs.com/FrankLei/p/6525668.html》;20170309;1 *

Also Published As

Publication number Publication date
CN110704765A (zh) 2020-01-17

Similar Documents

Publication Publication Date Title
CN105677327B (zh) 一种页面信息预加载的方法及系统
CN102325191B (zh) 一种全自动的页面无刷新处理方法及框架
CN106354873B (zh) 网页加载方法、装置及系统
US20150012987A1 (en) Multi-account login method and apparatus
US20140136512A1 (en) Relative performance prediction of a replacement database management system (dbms)
CN104268229B (zh) 一种基于多进程浏览器的资源获得方法及装置
CN109426603B (zh) 一种分析应用程序卡顿的方法和装置
CN110119393A (zh) 代码版本管理系统及方法
CN107544849A (zh) 一种web服务器并发管理方法及系统
CN114895773B (zh) 异构多核处理器的能耗优化方法、系统、装置及存储介质
CN105745644A (zh) 表示在网页浏览器中的网页的状态表示的建立
CN110851756A (zh) 页面加载方法、装置、计算机可读存储介质及终端设备
CN105069163A (zh) 网络请求处理方法和装置
CN109446038A (zh) 页面访问时长的统计方法及终端设备
CN110704765B (zh) 页面过渡效果实现方法
US20130335425A1 (en) Systems and Methods for Combining Animations
US8782626B2 (en) Search suggestions for static code analysis
CN110740081A (zh) 对标多家公司页面性能的数据可视化方法
CN114371969A (zh) 一种页面性能测试方法、装置、电子设备及存储介质
CN103838839B (zh) 一种ie内核浏览器的页面下载控制方法和系统
CN106528383B (zh) 一种抓取用户异步请求回调执行时间的方法
CN104156445A (zh) 自动化测试脚本编辑中获取页面元素的方法及系统
CN103546564A (zh) 基于Flex技术实现RIA的WEB应用方法及系统
CN103838838B (zh) Ie内核处理页面的方法和基于浏览器的页面下载方法
JP2003076545A (ja) プログラム開発支援装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant