基于移动终端的页面资源加载方法及装置.pdf

本发明公开了一种基于移动终端的页面资源加载方法及装置，涉及资源加载技术领域，所述方法包括：在界面中展示应用程序的当前页面时，获取用户在所述界面上的触控操作；根据所述触控操作确定所述应用程序的页面切换方向；根据所述当前页面和页面切换方向确定所述应用程序中的待加载页面，触发所述待加载页面的资源加载。本发明通过获取用户在所述界面上的触控操作，根据所述触控操作确定所述应用程序的页面切换方向，根据当前页面和页面切换方向确定所述应用程序中的待加载页面，再触发所述待加载页面的资源加载，有效缩短了场景应用的加载时间，提高了用户体验，并且无需加载一些可能不浏览的页面，节约了用户的流量。

权利要求书
1.  一种基于移动终端的页面资源加载方法，其特征在于，所述 方法包括：
在界面中展示应用程序的当前页面时，获取用户在所述界面上的 触控操作，所述应用程序由若干页面组成；
根据所述触控操作确定所述应用程序的页面切换方向；
根据所述当前页面和页面切换方向确定所述应用程序中的待加 载页面，触发所述待加载页面的资源加载。

2.  如权利要求1所述的方法，其特征在于，所述根据所述当前页 面和页面切换方向确定所述应用程序中的待加载页面，进一步包括：
将所述应用程序中从所述当前页面起沿所述页面切换方向的第 一个未加载页面作为所述待加载页面。

3.  如权利要求1～2中任一项所述的方法，其特征在于，所述触发 所述待加载页面的资源加载，进一步包括：
触发所述待加载页面的图片加载，并触发所述待加载页面的背景 图像加载。

4.  如权利要求1～3中任一项所述的方法，其特征在于，所述触发 所述待加载页面的图片加载，进一步包括：
向所述待加载页面的img标签中的src属性写入图片的统一资源 定位符URL，根据所述图片的URL下载对应的图片，从而实现所述待 加载页面的图片加载。

5.  如权利要求1～4中任一项所述的方法，其特征在于，所述触发 所述待加载页面的背景图像加载，进一步包括：
向所述待加载页面的body标签中的background属性写入背景图 像的统一资源定位符URL，根据所述背景图像的URL下载对应的背景 图像，从而实现所述待加载页面的背景图像加载。

6.  如权利要求1～5中任一项所述的方法，其特征在于，所述根 据所述触控操作确定所述应用程序的页面切换方向之后，还包括：
根据所述当前页面和页面切换方向确定所述应用程序中的待展 示页面，将所述界面中展示的当前页面切换为所述待展示页面。

7.  一种基于移动终端的页面资源加载装置，其特征在于，所述 装置包括：
操作获取器，适于在界面中展示应用程序的当前页面时，获取用 户在所述界面上的触控操作，所述应用程序由若干页面组成；
方向确定器，适于根据所述触控操作确定所述应用程序的页面切 换方向；
加载触发器，适于根据所述当前页面和页面切换方向确定所述应 用程序中的待加载页面，触发所述待加载页面的资源加载。

8.  如权利要求7所述的装置，其特征在于，所述加载触发器，还 适于将所述应用程序中从所述当前页面起沿所述页面切换方向的第 一个未加载页面作为所述待加载页面。

9.  如权利要求7～8中任一项所述的装置，其特征在于，所述加载 触发器，还适于触发所述待加载页面的图片加载，并触发所述待加载 页面的背景图像加载。

10.  如权利要求7～9中任一项所述的装置，其特征在于，所述加 载触发器，还适于向所述待加载页面的img标签中的src属性写入图片 的统一资源定位符URL，根据所述图片的URL下载对应的图片，从而 实现所述待加载页面的图片加载。

说明书基于移动终端的页面资源加载方法及装置
技术领域
本发明涉及资源加载技术领域，特别涉及一种基于移动终端的页 面资源加载方法及装置。
背景技术
场景应用是由若干页面所组成的应用程序，所述页面通过应用超 文本标记语言HTML技术开发，适合在移动终端上使用，通常通过 用户在移动终端上进行的触控操作来实现页面切换，从而完成交互， 如今常用于产品的推广。
由于场景应用的页面绝大部分是图片资源，而一般各张图片使用 jpg格式在100kb左右，若有10张图片则相当于1M，再加上其他图 片样式等资源，一般有2～5M。
现有技术中，用户在浏览场景应用时，由移动终端将整个场景应 用中的页面全部加载完成后，才能进行页面切换，但若移动终端在 2G网络或3G网络等网速较慢的网络中，会导致移动终端的页面加 载时间过长，严重影响用户体验，另外，用户不一定会浏览所述场景 应用中的所有页面，仍需加载所述场景应用中的所有页面，也会对用 户的流量造成一定浪费。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至 少部分地解决上述问题的一种基于移动终端的页面资源加载方法和 相应的一种基于移动终端的页面资源加载装置。
依据本发明的一个方面，提供了一种基于移动终端的页面资源加 载方法，所述方法包括：
在界面中展示应用程序的当前页面时，获取用户在所述界面上的 触控操作，所述应用程序由若干页面组成；
根据所述触控操作确定所述应用程序的页面切换方向；
根据所述当前页面和页面切换方向确定所述应用程序中的待加 载页面，触发所述待加载页面的资源加载。
可选地，所述根据所述当前页面和页面切换方向确定所述应用程 序中的待加载页面，进一步包括：
将所述应用程序中从所述当前页面起沿所述页面切换方向的第 一个未加载页面作为所述待加载页面。
可选地，所述触发所述待加载页面的资源加载，进一步包括：
触发所述待加载页面的图片加载，并触发所述待加载页面的背景 图像加载。
可选地，所述触发所述待加载页面的图片加载，进一步包括：
向所述待加载页面的img标签中的src属性写入图片的统一资源 定位符URL，根据所述图片的URL下载对应的图片，从而实现所述待 加载页面的图片加载。
可选地，所述触发所述待加载页面的背景图像加载，进一步包括：
向所述待加载页面的body标签中的background属性写入背景图 像的统一资源定位符URL，根据所述背景图像的URL下载对应的背景 图像，从而实现所述待加载页面的背景图像加载。
可选地，所述根据所述触控操作确定所述应用程序的页面切换方 向之后，还包括：
根据所述当前页面和页面切换方向确定所述应用程序中的待展 示页面，将所述界面中展示的当前页面切换为所述待展示页面。
依据本发明的另一个方面，提供了一种基于移动终端的页面资源 加载装置，所述装置包括：
操作获取器，适于在界面中展示应用程序的当前页面时，获取用 户在所述界面上的触控操作，所述应用程序由若干页面组成；
方向确定器，适于根据所述触控操作确定所述应用程序的页面切 换方向；
加载触发器，适于根据所述当前页面和页面切换方向确定所述应 用程序中的待加载页面，触发所述待加载页面的资源加载。
可选地，所述加载触发器，还适于将所述应用程序中从所述当前 页面起沿所述页面切换方向的第一个未加载页面作为所述待加载页 面。
可选地，所述加载触发器，还适于触发所述待加载页面的图片加 载，并触发所述待加载页面的背景图像加载。
可选地，所述加载触发器，还适于向所述待加载页面的img标签 中的src属性写入图片的统一资源定位符URL，根据所述图片的URL 下载对应的图片，从而实现所述待加载页面的图片加载。
可选地，所述加载触发器，还适于向所述待加载页面的body标签 中的background属性写入背景图像的统一资源定位符URL，根据所述 背景图像的URL下载对应的背景图像，从而实现所述待加载页面的背 景图像加载。
可选地，所述装置，还包括页面切换器，适于根据所述当前页面 和页面切换方向确定所述应用程序中的待展示页面，将所述界面中展 示的当前页面切换为所述待展示页面。
本发明通过获取用户在所述界面上的触控操作，根据所述触控操 作确定所述应用程序的页面切换方向，根据当前页面和页面切换方向 确定所述应用程序中的待加载页面，再触发所述待加载页面的资源加 载，有效缩短了场景应用的加载时间，提高了用户体验，并且无需加 载一些可能不浏览的页面，节约了用户的流量。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处 对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施 方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用 相同的参考符号表示相同的部件。在附图中：
图1是本发明一个实施例的一种基于移动终端的页面资源加载方 法的步骤流程图；
图2是本发明一个实施例的一种基于移动终端的页面资源加载方 法的步骤流程图；
图3是本发明一个实施例的一种场景应用中页面的示例图；
图4是本发明一个实施例的一种场景应用在首次浏览时的示例 图；
图5是本发明一个实施例的一种场景应用从第1页切换至第2页的 示例图；
图6是本发明一个实施例的一种场景应用从第2页切换至第3页的 示例图；
图7是本发明一种实施例的一种场景应用从第2页切换至第1页的 示例图；
图8是本发明一种实施例的一种场景应用从第1页切换至最后1页 的示例图；
图9是本发明一个实施例的一种基于移动终端的页面资源加载方 法的步骤流程图；
图10是本发明一个实施例的一种基于移动终端的页面资源加载 装置的结构框图；
图11是本发明一个实施例的一种基于移动终端的页面资源加载 装置的结构框图。
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细 描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
图1是本发明一个实施例的一种基于移动终端的页面资源加载方 法的步骤流程图；参照图1，所述方法包括：
S101：在界面中展示应用程序的当前页面时，获取用户在所述界 面上的触控操作，所述应用程序由若干页面组成；
可理解的是，所述界面即为移动终端的显示界面，所述当前页面 即为当前在移动终端的显示界面中所展示的页面，所述应用程序即为 场景应用。
S102：根据所述触控操作确定所述应用程序的页面切换方向；
需要说明的是，可在移动终端中预先设置触控操作和页面切换方 式之间的对应关系，再根据所述触控操作确定所述应用程序的页面切 换方向；
例如：在所述界面中预设两个按钮，当触控操作为点击第一按钮 时，可确定为页面切换方向为正向(设第N页为当前页面，即从场景 应用的第N页切换至第N+1页的方向)，当触控操作为点击第二按钮 时，可确定为页面切换方向为反向(即从场景应用的第N页切换至第 N-1页的方向)；
又例如：当触控操作为向上滑动时，可确定为页面切换方向为正 向，当触控操作为向下滑动时，可确定为页面切换方向为反向；
当然，步骤S102还可采用其他方式来确定所述应用程序的页面切 换方向，本实施例对此不加以限制。
S103：根据所述当前页面和页面切换方向确定所述应用程序中的 待加载页面，触发所述待加载页面的资源加载。
本实施例通过获取用户在所述界面上的触控操作，根据所述触控 操作确定所述应用程序的页面切换方向，根据当前页面和页面切换方 向确定所述应用程序中的待加载页面，再触发所述待加载页面的资源 加载，有效缩短了场景应用的加载时间，提高了用户体验，并且无需 加载一些可能不浏览的页面，节约了用户的流量。
图2是本发明一个实施例的一种基于移动终端的页面资源加载方 法的步骤流程图；参照图2，所述方法包括：
S201：在界面中展示应用程序的当前页面时，获取用户在所述界 面上的触控操作，所述应用程序由若干页面组成；
S202：根据所述触控操作确定所述应用程序的页面切换方向；
可理解的是，步骤S201～S202与图1所示的实施例中的步骤 S101～S102相同，在此不再赘述。
S203：根据所述当前页面和页面切换方向确定所述应用程序中的 待展示页面，将所述界面中展示的当前页面切换为所述待展示页面， 将所述应用程序中从所述当前页面起沿所述页面切换方向的第一个 未加载页面作为所述待加载页面，触发所述待加载页面的资源加载。
需要说明的是，为实现对用户所需浏览页面进行预测，并保证用 户浏览的连续性，本实施例中将所述应用程序中从所述当前页面起沿 所述页面切换方向的第一个未加载页面作为所述待加载页面。
可理解的是，为避免流量的浪费，并且保证用户的正常使用，需 要在首次浏览场景应用时，先加载初始页面的所有资源。
所述初始页面通常需要包括所述场景应用的第1页，另外还需要 与场景应用相邻的至少1页，由于用户通常的浏览习惯均为从前向后 浏览，故而，本实施例中将场景应用的第1、2页设置为初始页面，当 然，还可将其他页面也设置为初始页面，例如：将第3页也设置为初 始页面，或者，将最后1页也设置为初始页面，本实施例对此不加以 限制。
由于本实施例中实现了用户的按需加载，根据当前页面和页面切 换方向预测下一个将要浏览的页面，加载该页面的资源；用户无需加 载一些将来可能不浏览的页面资源，同时各次只加载一个页面的资 源，减少了http请求，有效缩短了场景应用的加载时间，提高了用户 体验。
下面以初始页面为第1、2页为例来说明待加载页面的确定，但并 不限定本发明的保护范围。
由于场景应用由若干页面组成，参照图3，可将场景应用视为一 个列表，各行为一个页面，各个页面均具有很多资源。
当用户首次浏览场景应用时，参照图4，会自动加载初始页面(即 第1、2页)的所有资源，若第1、2页的所有资源未加载，则不可翻页， 此时当前页面为第1页；
当用户需要从第1页切换至第2页时，获取用户在所述界面上的触 控操作，根据所述触控操作确定页面切换方向为正向，参照图5，从 而确定所述待加载页面为第3页，触发第3页的资源加载，此时当前页 面从第1页切换至第2页；
在第3页的资源加载完毕后，当用户需要从第2页切换至第3页时， 获取用户在所述界面上的触控操作，根据所述触控操作确定页面切换 方向为正向，参照图6，从而确定所述待加载页面为第4页，触发第4 页的资源加载，此时当前页面从第2页切换至第3页；
依次类推，若当前页面在倒数第3页时，当用户需要从倒数第3 页切换至倒数第2页时，获取用户在所述界面上的触控操作，根据所 述触控操作确定页面切换方向为正向，从而确定所述待加载页面为最 后1页，触发最后1页的资源加载，此时当前页面从倒数第3页切换至 倒数第2页；
在当前页面为第2页时，用户需要从第2页切换至第1页时，获取 用户在所述界面上的触控操作，根据所述触控操作确定页面切换方向 为反向，参照图7，从而确定所述待加载页面为最后1页，触发最后1 页的资源加载，此时当前页面从第2页切换至第1页；
在当前页面为第1页，用户需要从第1页切换至最后1页时，获取 用户在所述界面上的触控操作，根据所述触控操作确定页面切换方向 为反向，参照图8，从而确定所述待加载页面为倒数第2页，触发倒数 第2页的资源加载，此时当前页面从第1页切换至最后1页；
依次类推，若当前页面为最后1页，当用户需要从最后1页切换至 倒数第2页时，获取用户在所述界面上的触控操作，根据所述触控操 作确定页面切换方向为反向，从而确定所述待加载页面为倒数第3页， 触发倒数第3页的资源加载，此时当前页面从最后1页切换至倒数第2 页。
图9是本发明一个实施例的一种基于移动终端的页面资源加载方 法的步骤流程图；参照图9，所述方法包括：
S901：在界面中展示应用程序的当前页面时，获取用户在所述界 面上的触控操作，所述应用程序由若干页面组成；
S902：根据所述触控操作确定所述应用程序的页面切换方向；
步骤S901～S902与图1所示的实施例的步骤S101～S102相同，在此 不再赘述。
S903：根据所述当前页面和页面切换方向确定所述应用程序中的 待加载页面，触发所述待加载页面的图片加载，并触发所述待加载页 面的背景图像加载。
由于页面的资源中图片和背景图像的文件较大，对页面的资源加 载速度其决定性的作用，故而本实施例中，所述页面的资源为图片和 背景图像。
为使加载应用程序某一页面时不要一次性加载所有页面中的所 有图片和/或背景图像，可采用多种方式，本实施例中，在编写页面 HTML结构时，将背景图像和/或图片的URL均放置于相应的data-src 属性中，这样在应用程序中的某一页面被加载时(比如浏览器加载页 面时)则不会一次性自动下载所有图片和/或所有背景图像，而是根 据用户当前浏览的页面先预触发加载下页或上一页面对应的图片和/ 或背景图片。
当触发待加载页面的图片加载，并触发待加载页面的背景图像加 载时，通过jquery中的回传函数$(‘[data-src]’)选择所述待加载页面 中所有图片和背景图像(可在data-src中通过bg＝1来标识背景图像)， 再通过new Image()创建图片和背景图像的对象，向所述待加载页面的 img标签中的src属性写入放置于data-src属性中的图片的URL，向所述 待加载页面的body标签中的background属性写入放置于data-src属性 中的背景图像的URL，根据所述图片的URL下载对应的图片，根据所 述背景图像的URL下载对应的背景图像，从而实现所述待加载页面的 图片及背景图像的加载；
当然，还可采用其他方式来实现，例如将背景图像和图片的URL 均放置于其他属性中，或者，将背景图像和图片的URL直接写入js变 量数组中，本实施例对此不加以限制。
对于方法实施例，为了简单描述，故将其都表述为一系列的动作 组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的 动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺 序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描 述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施 例所必须的。
图10是本发明一个实施例的一种基于移动终端的页面资源加载 装置的结构框图；参照图10，所述装置包括：
操作获取器1001，适于在界面中展示应用程序的当前页面时，获 取用户在所述界面上的触控操作，所述应用程序由若干页面组成；
方向确定器1002，适于根据所述触控操作确定所述应用程序的页 面切换方向；
加载触发器1003，适于根据所述当前页面和页面切换方向确定所 述应用程序中的待加载页面，触发所述待加载页面的资源加载。
在本发明的一种可选实施例中，所述加载触发器，还适于将所述 应用程序中从所述当前页面起沿所述页面切换方向的第一个未加载 页面作为所述待加载页面。
在本发明的一种可选实施例中，所述加载触发器，还适于触发所 述待加载页面的图片加载，并触发所述待加载页面的背景图像加载。
在本发明的一种可选实施例中，所述加载触发器，还适于向所述 待加载页面的img标签中的src属性写入图片的统一资源定位符URL， 根据所述图片的URL下载对应的图片，从而实现所述待加载页面的图 片加载。
在本发明的一种可选实施例中，所述加载触发器，还适于向所述 待加载页面的body标签中的background属性写入背景图像的统一资 源定位符URL，根据所述背景图像的URL下载对应的背景图像，从而 实现所述待加载页面的背景图像加载。
图11是本发明一个实施例的一种基于移动终端的页面资源加载 装置的结构框图；参照图11，所述装置包括：
操作获取器1101，适于在界面中展示应用程序的当前页面时，获 取用户在所述界面上的触控操作，所述应用程序由若干页面组成；
方向确定器1102，适于根据所述触控操作确定所述应用程序的页 面切换方向；
加载触发器1103，适于根据所述当前页面和页面切换方向确定 所述应用程序中的待加载页面，触发所述待加载页面的资源加载。
页面切换器1104，适于根据所述当前页面和页面切换方向确定 所述应用程序中的待展示页面，将所述界面中展示的当前页面切换为 所述待展示页面。
对于装置实施例而言，由于其与方法实施例基本相似，所以描述 的比较简单，相关之处参见方法实施例的部分说明即可。
应当注意的是，在本发明的装置的各个部件中，根据其要实现的 功能而对其中的部件进行了逻辑划分，但是，本发明不受限于此，可 以根据需要对各个部件进行重新划分或者组合，例如，可以将一些部 件组合为单个部件，或者可以将一些部件进一步分解为更多的子部 件。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多 个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的 技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器 (DSP)来实现根据本发明实施例的装置中的一些或者全部部件的一 些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的 一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程 序产品)。这样的实现本发明的程序可以存储在计算机可读介质上， 或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网 站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进 行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下 可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参 考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权 利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排 除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬 件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权 利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体 现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些 单词解释为名称。
以上实施方式仅用于说明本发明，而并非对本发明的限制，有关 技术领域的普通技术人员，在不脱离本发明的精神和范围的情况下， 还可以做出各种变化和变型，因此所有等同的技术方案也属于本发明 的范畴，本发明的专利保护范围应由权利要求限定。
本发明公开了A1、一种基于移动终端的页面资源加载方法，所 述方法包括：
在界面中展示应用程序的当前页面时，获取用户在所述界面上的 触控操作，所述应用程序由若干页面组成；
根据所述触控操作确定所述应用程序的页面切换方向；
根据所述当前页面和页面切换方向确定所述应用程序中的待加 载页面，触发所述待加载页面的资源加载。
A2、如A1所述的方法，所述根据所述当前页面和页面切换方向 确定所述应用程序中的待加载页面，进一步包括：
将所述应用程序中从所述当前页面起沿所述页面切换方向的第 一个未加载页面作为所述待加载页面。
A3、如A1～A2中任一项所述的方法，所述触发所述待加载页面 的资源加载，进一步包括：
触发所述待加载页面的图片加载，并触发所述待加载页面的背景 图像加载。
A4、如A1～A3中任一项所述的方法，所述触发所述待加载页面 的图片加载，进一步包括：
向所述待加载页面的img标签中的src属性写入图片的统一资源 定位符URL，根据所述图片的URL下载对应的图片，从而实现所述待 加载页面的图片加载。
A5、如A1～A4中任一项所述的方法，所述触发所述待加载页面 的背景图像加载，进一步包括：
向所述待加载页面的body标签中的background属性写入背景图 像的统一资源定位符URL，根据所述背景图像的URL下载对应的背景 图像，从而实现所述待加载页面的背景图像加载。
A6、如A1～A5中任一项所述的方法，所述根据所述触控操作确 定所述应用程序的页面切换方向之后，还包括：
根据所述当前页面和页面切换方向确定所述应用程序中的待展 示页面，将所述界面中展示的当前页面切换为所述待展示页面。
本发明还公开了B7、一种基于移动终端的页面资源加载装置，所 述装置包括：
操作获取器，适于在界面中展示应用程序的当前页面时，获取用 户在所述界面上的触控操作，所述应用程序由若干页面组成；
方向确定器，适于根据所述触控操作确定所述应用程序的页面切 换方向；
加载触发器，适于根据所述当前页面和页面切换方向确定所述应 用程序中的待加载页面，触发所述待加载页面的资源加载。
B8、如B7所述的装置，所述加载触发器，还适于将所述应用程 序中从所述当前页面起沿所述页面切换方向的第一个未加载页面作 为所述待加载页面。
B9、如B7～B8中任一项所述的装置，所述加载触发器，还适于触 发所述待加载页面的图片加载，并触发所述待加载页面的背景图像加 载。
B10、如B7～B9中任一项所述的装置，所述加载触发器，还适于 向所述待加载页面的img标签中的src属性写入图片的统一资源定位 符URL，根据所述图片的URL下载对应的图片，从而实现所述待加载 页面的图片加载。
B11、如B7～B10中任一项所述的装置，所述加载触发器，还适于 向所述待加载页面的body标签中的background属性写入背景图像的 统一资源定位符URL，根据所述背景图像的URL下载对应的背景图 像，从而实现所述待加载页面的背景图像加载。
B12、如B7～B11中任一项所述的装置，所述装置，还包括页面 切换器，适于根据所述当前页面和页面切换方向确定所述应用程序中 的待展示页面，将所述界面中展示的当前页面切换为所述待展示页 面。