CN104965656A - 页面显示方法及装置 - Google Patents

Abstract

本发明公开了一种页面显示方法及装置，其中所述方法包括：当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；按照预定的旋转方向，对第二页面进行至少一次旋转；加载所述新页面的页面数据至第二页面上，得到所述新页面；显示所得到的新页面。可解决由于旧页面与新页面一瞬间的切换而导致的用户体验度不高的问题。

Description

页面显示方法及装置

技术领域

本发明涉及页面显示技术领域，具体涉及一种页面显示方法及装置。

背景技术

目前常用的页面展示方法为：当用户点击浏览器上的一个新页面时，运行有该浏览器应用的前台与存储有该新页面信息的服务器进行连接，并在连接后获取新页面信息如文字、图片等内容，将所获取的内容作为新页面中的内容，通过浏览器展示在设备中。对于用户来说，这种方法使得旧页面与新页面在一瞬间得到切换，用户只能通过对新页面内容的进一步确认才能确定新页面是否显示成功，用户体验度不高。况且在新页面和旧页面显示的内容一致时，这种方法很容易让用户觉得用户请求的新页面没有成功，可能导致用户对新页面展示请求的频繁发起。

发明内容

为解决现有存在的技术问题，本发明实施例在于提供一种页面显示方法及装置，以至少解决由于旧页面与新页面一瞬间的切换而导致的用户体验度不高的问题。

本发明实施例的技术方案是这样实现的：

本发明实施例提供一种页面显示方法，所述方法包括：

当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；

按照预定的旋转方向，对第二页面进行至少一次旋转；

加载所述新页面的页面数据至第二页面上，得到所述新页面；

显示所得到的新页面。

上述方案中，所述按照预定的旋转方向，对第二页面进行至少一次旋转，包括：

按照预定的旋转方向，对第二页面旋转第一角度，第一角度为180度或360度；或者，

按照预定的旋转方向，对第二页面先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90度或180度；或者，

以第二页面的纵向中心线为轴，先按照预定的旋转方向旋转90度，再旋转90度，最后按照该旋转方向的反方向旋转180度。

上述方案中，在所述加载所述新页面的页面数据至第二页面上之前，所述方法还包括：

获取所述页面数据；

进一步的，浏览器以网页开发技术AJAX异步请求方式，向服务器请求该页面数据；或者，浏览器自身向服务器请求该页面数据。

上述方案中，所述方法还包括：

浏览器通过js文件加载所述页面数据；

或者，浏览器自身加载所述页面数据。

上述方案中，所述方法还包括：在第二页面旋转到预定角度时加载所述页面数据；或者，在第二页面由第一预定角度旋转到第二预定角度的过程中加载所述页面数据；或者，在第二页面旋转结束时加载所述页面数据。

本发明实施例提供了一种页面显示装置，所述装置包括：

第一获取单元，用于当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；

第一旋转单元，用于按照预定的旋转方向，对第二页面进行至少一次旋转；

第一加载单元，用于加载所述新页面的页面数据至第二页面上，得到所述新页面；

第一显示单元，用于显示第一加载单元所得到的新页面。

上述方案中，所述第一旋转单元，用于：

按照预定的旋转方向，对第二页面旋转第一角度，第一角度为180度或360度；或者，

按照预定的旋转方向，对第二页面先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90度或180度；或者，

以第二页面的纵向中心线为轴，先按照预定的旋转方向旋转90度，再旋转90度，最后按照该旋转方向的反方向旋转180度。

上述方案中，所述装置还包括：

第二获取单元，用于获取所述页面数据；

进一步的，所述第二获取单元，用于触发浏览器以网页开发技术AJAX异步请求方式，向服务器请求该页面数据；或者，触发浏览器自身向服务器请求该页面数据。

上述方案中，所述第一加载单元，用于：触发浏览器通过js文件加载所述页面数据；或者，触发浏览器自身加载所述页面数据。

上述方案中，所述第一加载单元，用于：在第二页面旋转到预定角度时加载所述页面数据；或者，在第二页面由第一预定角度旋转到第二预定角度的过程中加载所述页面数据；或者，在第二页面旋转结束时加载所述页面数据。

本发明实施例提供的页面显示方法及装置，其中所述方法包括：当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；按照预定的旋转方向，对第二页面进行至少一次旋转；加载所述新页面的页面数据至第二页面上，得到所述新页面；显示所得到的新页面。通过第二页面的至少一次旋转得到新页面，与传统的旧页面经一瞬间切换而得到新页面相比较，用户可看见新页面的动态形成过程，为用户提供了良好的视觉体验；可解决由于旧页面与新页面一瞬间的切换而导致的用户体验度不高的问题。

附图说明

图1为本发明实施例的页面显示方法的实现流程图；

图2为本发明实施例的页面显示方法的一具体实现流程图；

图3(a)～(e)为本发明实施例的页面旋转的示意图；

图4为本发明实施例的页面显示装置的组成结构示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行详细说明，应当理解，以下所说明的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

图1为本发明实施例的页面显示方法的实现流程图；如图1所示，所述方法包括：

步骤101：当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；

这里，检测用户是否点击浏览器上新的网页链接，检测到用户点击有新的网页链接时，确定检测到存在有用户对新页面的页面显示请求，第一页面为新页面。如果用户当前请求的新页面为浏览器第一次打开的页面，则生成一个空白页面；如果用户当前请求的新页面不是浏览器第一次打开的页面，则将在当前请求的新页面之前所显示的页面作为旧页面，并将该旧页面作为第二页面。如果第二页面为旧页面，那么在该页面加载新页面数据之前，需要将旧页面上的页面数据进行删除或者将旧页面上的与新页面数据不相同的数据删除。

步骤102：按照预定的旋转方向，对第二页面进行至少一次旋转；

这里，预定的旋转方向为页面的顺时针或逆时针方向。例如，按照顺时针或逆时针方向，将第二页面旋转第一角度，第一角度为180°或360°；或者，按照顺时针或逆时针方向将第二页面先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90°或180°；或者，以第二页面的纵向中心线为轴，将第二页面先顺时针旋转90°，再顺时针旋转90°，最后逆时针旋转180度。

本领域人员应该得知，以上几种旋转方式均为一种具体举例而已，本实施例中的旋转方式还包括其他能够想到的方式，此处不做具体限定。本实施例中，优选的旋转方式为第三种：即以第二页面的纵向中心线为轴，先顺时针旋转90°，再顺时针旋转90°，最后逆时针旋转180度。

步骤103：加载所述新页面的页面数据至第二页面上，得到所述新页面；

这里，在检测到存在有用户的新页面显示请求时，运行在前台上的浏览器向服务器请求该新页面的页面数据如文字、图片等；获取到页面数据后，可以在第二页面旋转到预定角度时加载所述页面数据，如在第二页面旋转到第一个90°时加载页面数据；或者，在第二页面由第一预定角度旋转到第二预定角度的过程中加载所述页面数据，如在第二页面由第一个90°旋转到第二个90°的过程中加载页面数据；或者，在第二页面旋转结束时加载所述页面数据。本实施例，优选为在第二页面旋转到预定角度时加载所述页面数据。由此可见，本实施例中通过第二页面的至少一次旋转以及相关页面数据的加载得到新页面，用户可看见新页面的动态形成过程，为用户提供了良好的视觉体验。

步骤104：显示所得到的新页面；

这里，显示新页面在浏览器上。

上述方案中，第二页面的每次旋转均利用超文本标记语言(HTML，Hypertext Markup Language)中的串联样式表(CSS，Cascading Style Sheets)来实现。考虑到新页面可能为静态资源页面也可能为动态资源页面，其中，动态资源页面的数据量较大，浏览器获取该数据的时间较长，而静态资源页面的数据较小，所以，本实施中当新页面为动态资源页面时，浏览器通过HTML中的网页开发技术AJAX(Asynchronous JavaScript And XML)，以AJAX异步请求方式，向服务器请求该动态资源页面的页面数据，可缩短页面数据的获取时间，并在加载该页面数据时，通过HTML中的js(JavaScript脚本)文件来加载该页面数据，这样新页面的形成就不会出现不连贯的现象。当新页面为静态资源页面时，由浏览器自身向服务器请求该页面数据并加载，静态资源页面的数据量较小，即使不适用AJAX异步请求方式和js文件，浏览器也会很快获取到该页面的页面数据。

图2为本发明实施例的页面显示方法的一具体实现流程图；图3(a)～(e)为本发明实施例的页面旋转的示意图。下面结合图2以及图3(a)～(e)对本发明实施例做进一步说明。

在图3(a)～(e)，以第二页面的纵向中心线为轴，先顺时针旋转90°，再顺时针旋转90°，最后逆时针旋转180度为例。

步骤201：检测到用户点击有新的网页链接时，确定检测到存在有用户对新页面的页面显示请求；

步骤202：向服务器请求该新页面的页面数据；

这里，如果新页面为动态资源页面，浏览器以AJAX异步请求方式向服务器请求该动态资源页面的页面数据，可缩短页面数据的获取时间；如果新页面为静态资源页面，无需使用AJAX异步请求方式，由浏览器自身向服务器请求该页面数据。

步骤203：接收服务器返回的页面数据；

步骤204：以第二页面的纵向中心线如图中的黑色粗实线为轴，沿着顺时针方向，利用CSS将第二页面先旋转90°；

这里，第二页面从图3(a)所示旋转到图3(b)所示的位置。需要说明的是，第二页面为之前显示过的旧页面，因为当前所请求显示的新页面与旧页面的部分页面数据相同，所以在将该旧页面作为第二页面时，将旧页面上与新页面相同的页面数据保留，如保留有图中的“条件一”、“条件二”等文字以及“查询”按键，将旧页面上与新页面不同的页面数据删除。如果当前所请求显示的新页面与之前显示的旧页面没有相同的页面数据、或者当前所请求显示的新页面为浏览器的第一次页面显示，则第二页面为空白页面。

步骤205：当利用CSS将第二页面旋转到第一个90度时，加载所接收到的页面数据至第二页面上；

这里，将所接收到的页面数据加载在图3(b)所示的第二页面上，得到如图3(c)所示的第二页面。

需要说明的是，如果新页面为动态资源页面，以AJAX异步请求方式向服务器请求到该动态资源页面的页面数据时，需要利用js文件加载该页面数据至第二页面上，能够避免由于动态资源页面的页面数据量大而导致的页面形成不连贯的问题；如果新页面为静态资源页面，无需利用js文件，由浏览器自身加载该页面数据。

步骤206：利用CSS将加载有页面数据的第二页面继续旋转90°；

这里，如图3(d)所示，如果将图3(a)所示的角度作为第二页面的初始角度如0°，那么图3(d)相对于初始角度转过了180°，并且还显示有新页面的页面数据，但是这个时候的页面数据如文字均为反着的，不利于用户的观看。

步骤207：按照逆时针方向，利用CSS将加载有页面数据的第二页面接着旋转180°，得到新页面；

这里，将第二页面从图3(d)所示的角度逆时针旋转180°至图3(e)所示的角度。在图3(d)中页面上的数据如文字是反着显示的，不利于用户的观看，通过逆时针旋转180°使得文字显示为正向的，便于用户的观看。

步骤208：在浏览器上显示得到的新页面；

这里，在浏览器上显示经多次旋转而得到的新页面，页面上的数据为正向的，方便了用户的观看。

另外，前述的方案为在第二页面进行第一次顺时针90°的旋转后加载页面数据；也可以在第二页面进行第二次顺时针90°的旋转后加载页面数据；也可在第二页面三次旋转完成后加载页面数据；还可以在每次旋转后加载部分页面数据，当三次旋转完成，全部页面数据随之加载完毕。本领域人员应该而知，此处说明的页面数据的加载时刻以及加载形式仅为一种具体举例而已，并不代表本实施的所有情况，还可以包括其他任何能够想到的形式，对此不做具体限定。

执行前述步骤201～步骤208的实体为前台，还可以具体为运行在前台上的浏览器。由前述步骤201～步骤208可知，第二页面经过两次顺时针的90°旋转以及一次逆时针的180°旋转，并加载相关页面数据后，得到新页面。即将第二页面进行多次旋转得到新页面，第二页面的多次旋转是显示在浏览器中的，用户可看见新页面的动态形成过程，为用户提供了良好的视觉体验，至少解决了相关技术中由于旧页面与新页面一瞬间的切换而导致的用户体验度不高的问题。

此外，对于本实施例的其他情况，如针对按照顺时针或逆时针方向，旋转第一角度，第一角度为180°或360°这一情况，以第二页面为空白页面为例，沿着顺时针方向直接将第二页面旋转180°或360°，即在空间中旋转半周或一周，并加载所获取的页面数据至旋转后的页面上，形成所述新页面。针对按照顺时针或逆时针方向先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90°或180°的这一情况，以第二页面为空白页面、第一子角度和第二子角度均为180°为例，沿着顺时针方向，先旋转180°，再在顺时针方向上接着旋转180°，相当于在空间中旋转了一周，并加载所获取的页面数据至旋转后的页面上，形成所述新页面。这几种情况为不存在有页面数据如文字反着加载的情况，在加载时直接进行页面数据的正向加载即可。

另外，针对新页面与旧页面的部分页面数据相同的情况，在新页面形成的过程中，保留相同的数据，仅对两者不相同的数据进行加载，即本发明的技术方案不仅适用于整个页面的刷新/加载，也适用于页面数据模块的异步加载即部分页面数据的加载。

再有，针对新页面和旧页面的页面数据全部一致的这种情况，本实施例中依然将旧页面进行至少一次旋转及页面数据加载而得到新页面，用户可通过新页面的动态形成过程得知新页面是否请求成功，无需频繁发起对新页面显示的请求。

基于前述的页面显示方法，本发明实施例还提供了一种页面显示装置，如图4所示，所述装置包括：第一获取单元401、第一旋转单元402、第一加载单元403、第一显示单元404；其中，

第一获取单元401，用于当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；

这里，第一获取单元401检测用户是否点击浏览器上新的网页链接，检测到用户点击有新的网页链接时，确定检测到存在有用户的新页面显示请求。如果用户当前请求的新页面为浏览器第一次打开的页面，则生成一个空白页面；如果用户当前请求的新页面不是浏览器第一次打开的页面，则将在当前请求的新页面之前所显示的页面作为旧页面，并将该旧页面作为第二页面。如果第二页面为旧页面，那么在该页面加载新页面数据之前，需要将旧页面上的页面数据进行删除或者将旧页面上的与新页面数据不相同的数据删除。

第一旋转单元402，用于按照预定的旋转方向，对第二页面进行至少一次旋转；

这里，预定的旋转方向为页面的顺时针或逆时针方向。例如，第一旋转单元402按照顺时针或逆时针方向，将第二页面旋转第一角度，第一角度为180°或360°；或者，按照顺时针或逆时针方向将第二页面先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90°或180°；或者，以第二页面的纵向中心线为轴，将第二页面先顺时针旋转90°，再顺时针旋转90°，最后逆时针旋转180度。

本领域人员应该得知，以上几种旋转方式均为一种具体举例而已，本实施例中的旋转方式还包括其他能够想到的方式，此处不做具体限定。本实施例中，优选的旋转方式为第三种：即以第二页面的纵向中心线为轴，先顺时针旋转90°，再顺时针旋转90°，最后逆时针旋转180度。

第一加载单元403，用于加载所述新页面的页面数据至第二页面上，得到所述新页面；

这里，在第一获取单元401检测到存在有用户的新页面显示请求时，所述装置的第二获取单元(图中未示意出)，用于获取所述页面数据；进一步的，所述第二获取单元触发浏览器以网页开发技术AJAX异步请求方式，向服务器请求该页面数据；或者，触发浏览器自身向服务器请求该页面数据。在第二获取单元获取到页面数据后，第一加载单元403触发浏览器通过js文件加载所述页面数据；或者，触发浏览器自身加载所述页面数据；具体的，第一加载单元403可以在第二页面旋转到预定角度时加载所述页面数据，如在第二页面旋转到第一个90°时加载页面数据；或者，在第二页面由第一预定角度旋转到第二预定角度的过程中加载所述页面数据，如在第二页面由第一个90°旋转到第二个90°的过程中加载页面数据；或者，在第二页面旋转结束时加载所述页面数据。本实施例，优选为在第二页面旋转到预定角度时加载所述页面数据。由此可见，本实施例中通过第二页面的至少一次旋转以及相关页面数据的加载得到新页面，用户可看见新页面的动态形成过程，为用户提供了良好的视觉体验。

第一显示单元404，用于显示第一加载单元所得到的新页面。

这里，第一显示单元404显示新页面在浏览器上。

本发明实施例的页面显示装置，由于其解决问题的原理与前述的页面显示方法相似，因此，页面显示装置的实施过程及实施原理均可以参见前述页面显示方法的实施过程及实施原理描述，重复之处不再赘述。

本领域技术人员应当理解，图4中所示的页面显示装置中的各处理单元的实现功能可参照前述页面显示方法的相关描述而理解。本领域技术人员应当理解，图4所示的页面显示装置中各处理单元的功能可通过运行于处理器上的程序而实现，也可通过具体的逻辑电路而实现。

在实际应用中，所述第一获取单元401、第一旋转单元402、第一加载单元403、第一显示单元404均可由中央处理单元(CPU，Central Processing Unit)、或数字信号处理(DSP，Digital Signal Processor)、或微处理器(MPU，MicroProcessor Unit)、或现场可编程门阵列(FPGA，Field Programmable Gate Array)等来实现。

本发明提供的技术方案的优势在于：

1)通过第二页面的至少一次旋转得到新页面，与传统的旧页面经一瞬间切换而得到新页面相比较，用户可看见新页面的动态形成过程，为用户提供了良好的视觉体验；

2)页面数据的加载时刻以及加载形式可根据实际需求而灵活设定，可丰富新页面动态形成的多样性；

3)针对新页面与旧页面的部分页面数据相同的情况，在新页面形成的过程中，保留相同的数据，仅对两者不相同的数据进行加载，即本发明的技术方案不仅适用于整个页面的刷新/加载，也适用于页面数据模块的异步加载；

4)针对新页面和旧页面的页面数据全部一致的情况，本实施例中依然将旧页面进行至少一次旋转及页面数据加载而得到新页面，用户可通过新页面的动态形成过程得知新页面是否请求成功，可避免由于不确定新页面是否成功显示而导致的需要频繁发起对新页面显示的请求这一现象。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。

Claims (10)

1.一种页面显示方法，其特征在于，所述方法包括：

当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；

按照预定的旋转方向，对第二页面进行至少一次旋转；

加载所述新页面的页面数据至第二页面上，得到所述新页面；

显示所得到的新页面。

2.根据权利要求1所述的方法，其特征在于，所述按照预定的旋转方向，对第二页面进行至少一次旋转，包括：

按照预定的旋转方向，对第二页面旋转第一角度，第一角度为180度或360度；或者，

按照预定的旋转方向，对第二页面先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90度或180度；或者，

以第二页面的纵向中心线为轴，先按照预定的旋转方向旋转90度，再旋转90度，最后按照该旋转方向的反方向旋转180度。

3.根据权利要求1所述的方法，其特征在于，在所述加载所述新页面的页面数据至第二页面上之前，所述方法还包括：

获取所述页面数据；

进一步的，浏览器以网页开发技术AJAX异步请求方式，向服务器请求该页面数据；或者，浏览器自身向服务器请求该页面数据。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

浏览器通过js文件加载所述页面数据；

或者，浏览器自身加载所述页面数据。

5.根据权利要求1或2所述的方法，其特征在于，所述方法还包括：在第二页面旋转到预定角度时加载所述页面数据；或者，在第二页面由第一预定角度旋转到第二预定角度的过程中加载所述页面数据；或者，在第二页面旋转结束时加载所述页面数据。

6.一种页面显示装置，其特征在于，所述装置包括：

第一获取单元，用于当检测到用户针对第一页面的页面显示请求时，获取第二页面，所述第一页面为新页面，所述第二页面为空白页面或旧页面；

第一旋转单元，用于按照预定的旋转方向，对第二页面进行至少一次旋转；

第一加载单元，用于加载所述新页面的页面数据至第二页面上，得到所述新页面；

第一显示单元，用于显示第一加载单元所得到的新页面。

7.根据权利要求6所述的装置，其特征在于，所述第一旋转单元，用于：

按照预定的旋转方向，对第二页面旋转第一角度，第一角度为180度或360度；或者，

按照预定的旋转方向，对第二页面先旋转第一子角度，再旋转第二子角度，第一子角度与第二子角度相同且为90度或180度；或者，

以第二页面的纵向中心线为轴，先按照预定的旋转方向旋转90度，再旋转90度，最后按照该旋转方向的反方向旋转180度。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

第二获取单元，用于获取所述页面数据；

进一步的，所述第二获取单元，用于触发浏览器以网页开发技术AJAX异步请求方式，向服务器请求该页面数据；或者，触发浏览器自身向服务器请求该页面数据。

9.根据权利要求6所述的装置，其特征在于，所述第一加载单元，用于：触发浏览器通过js文件加载所述页面数据；或者，触发浏览器自身加载所述页面数据。

10.根据权利要求6或7所述的装置，其特征在于，所述第一加载单元，用于：在第二页面旋转到预定角度时加载所述页面数据；或者，在第二页面由第一预定角度旋转到第二预定角度的过程中加载所述页面数据；或者，在第二页面旋转结束时加载所述页面数据。