[发明专利]一种加载系统页面的方法和装置

说明书

技术领域

本发明实施例涉及但不限于云数据中心管理平台技术，尤指一种加载系统页面的方法和装置。

背景技术

随着万维网(Web)技术的不断推广，越来越多的系统为了美观在系统页面中添加很多的图片，但是，不容忽视的是在提高系统页面美观度的同时，给系统页面的加载带来了负面效应，这是因为向网络请求加载图片(导航栏的各个导航菜单对应的按钮的图片(按钮是组件，按钮的图片即是按钮的皮肤)和系统页面所包括的各个图片)的过程耗时越久(请求加载的图片越多，加载过程耗时越久)，页面加载的时间就越长，因此，页面的下载和渲染由于过多的图片而变得迟缓，严重影响了用户体验。

发明内容

本申请提供了一种加载系统页面的方法和装置，能够减少系统页面加载的时间，提高系统页面的性能，提升用户体验。

为了达到本申请目的，本申请提供了一种加载系统页面的方法，包括：

获取系统页面的导航栏的全部导航菜单的名称，以及获取系统页面所包括的全部图片；

采用级联样式表CSS技术生成与获得的每个导航菜单的名称对应的按钮的图标，以及采用CSS技术生成与获得的系统页面所包括的每张图片对应的图标；

当检测到加载系统页面时，显示已生成的每个导航菜单的名称对应的按钮的图标，以及采用CSS图像拼合Sprites技术显示已生成的该系统页面所包括的每张图片对应的图标。

可选地，生成的每个按钮的图标均对应一个第一CSS代码；生成的每个图标均对应一个第二CSS代码。

可选地，在所述采用级联样式表CSS技术生成与获得的每个导航菜单的名称对应的按钮的图标，以及采用CSS技术生成与获得的系统页面所包括的每张图片对应的图标的步骤之后，在所述显示已生成的每个导航菜单的名称对应的按钮的图标的步骤之前，该方法还包括：

针对于所述生成的每个按钮的图标，将所述按钮的图标与所述按钮的图标对应的第一CSS代码对应存储；

针对于所述生成的每个图标，将所述图标与所述图标对应的第二CSS代码对应存储。

可选地，所述显示已生成的每个导航菜单的名称对应的按钮的图标的步骤包括：

获取并加载已生成的每个导航菜单的名称对应的按钮的图标所对应的第一CSS代码。

可选地，所述采用CSS Sprites技术显示已生成的该系统页面所包括的每张图片对应的图标的步骤包括：

采用所述CSS Sprites技术将所述系统页面所包括的每张图片对应的图标整合到预先创建的文件中；

通过所述CSS技术的规定要使用的背景图像background-image功能、规定如何重复背景图像background-repeat功能和规定背景图像的位置background-position功能确定所述系统页面所包括的每张图片对应的图标在所述系统页面中的位置；

在确定出的位置处加载所述页面系统所包括的每张图片对应的图标所对应的第二CSS代码。

本申请还提供了一种加载系统页面的装置，包括：获取模块、生成模块、检测模块和加载模块；其中，

获取模块，用于获取系统页面的导航栏的全部导航菜单的名称，以及获取系统页面所包括的全部图片；

生成模块，用于采用级联样式表CSS技术生成与获得的每个导航菜单的名称对应的按钮的图标，以及采用CSS技术生成与获得的系统页面所包括的每张图片对应的图标；

检测模块，用于当检测到加载系统页面时，通知加载模块；

加载模块，用于接收到来自检测模块的通知，显示已生成的每个导航菜单的名称对应的按钮的图标，以及采用CSS图像拼合Sprites技术显示已生成的该系统页面所包括的每张图片对应的图标。

可选地，生成的每个按钮的图标均对应一个第一CSS代码；生成的每个图标均对应一个第二CSS代码。

可选地，该装置还包括存储模块，用于：

针对于所述生成的每个按钮的图标，将所述按钮的图标与所述按钮的图标对应的第一CSS代码对应存储；

针对于所述生成的每个图标，将所述图标与所述图标对应的第二CSS代码对应存储。

可选地，所述加载模块中用于显示已生成的每个导航菜单的名称对应的按钮的图标包括：

获取并加载已生成的每个导航菜单的名称对应的按钮的图标所对应的第一CSS代码。

可选地，所述加载模块中用于采用CSS Sprites技术显示已生成的该系统页面所包括的每张图片对应的图标包括：