CN111159597A - 骨架屏的生成方法、系统、计算机设备及存储介质 - Google Patents

骨架屏的生成方法、系统、计算机设备及存储介质 Download PDF

Info

Publication number
CN111159597A
CN111159597A CN201911356156.2A CN201911356156A CN111159597A CN 111159597 A CN111159597 A CN 111159597A CN 201911356156 A CN201911356156 A CN 201911356156A CN 111159597 A CN111159597 A CN 111159597A
Authority
CN
China
Prior art keywords
webpage
skeleton screen
resource
picture
generating
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.)
Pending
Application number
CN201911356156.2A
Other languages
English (en)
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.)
Ping An Pension Insurance Corp
Original Assignee
Ping An Pension Insurance Corp
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 Ping An Pension Insurance Corp filed Critical Ping An Pension Insurance Corp
Priority to CN201911356156.2A priority Critical patent/CN111159597A/zh
Publication of CN111159597A publication Critical patent/CN111159597A/zh
Pending legal-status Critical Current

Links

Images

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明实施例提供一种骨架屏的生成方法，包括步骤：当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名；对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成；当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息；根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中所述骨架屏包括多张背景图片；加载所述骨架屏，并运行所述动画效果。通过本发明实施例，能够自动地对网页资源进行解析，然后获取页面布局中的文本行、图片块等网页元素，从而根据这些网页元素自动生成对应的骨架屏，并为所述骨架屏添加动画效果。

Description

骨架屏的生成方法、系统、计算机设备及存储介质
技术领域
本发明实施例涉及计算机技术领域，尤其涉及一种骨架屏的生成方法、系统、计算机设备及存储介质。
背景技术
实际应用中，当手机应用或者浏览器加载一个页面时，可能由于用户设备数据传输速度的限制或者网络环境不佳，页面内容不能及时加载。在现有技术中，在等待页面加载时，通常是将该页面的骨架屏展示给用户，以提示用户内容正在加载。骨架屏是网页开发人员根据某一网页或者应用的页面布局手写的占位图片，只能对应特定的页面布局。当某一网页或者应用的页面布局需要改动时，开发人员需要重新编写骨架屏的代码，并不能根据改动后的页面布局来生成对应骨架屏。
故，本发明旨在解决上述当某一网页或者应用的页面布局需要改动时，不能根据改动后的页面布局来自动生成对应的骨架屏的问题。
发明内容
有鉴于此，本发明实施例提供了一种骨架屏的生成方法、系统、计算机设备及计算机可读存储介质，能够根据网页或者应用的页面布局自动生成对应的骨架屏，并为所述骨架屏添加动画效果。
本发明实施例是通过下述技术方案来解决上述技术问题：
一种骨架屏的生成方法，包括以下步骤：
当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名；
对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成；
当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息；
根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中，所述骨架屏包括多张背景图片；
加载所述骨架屏，并运行所述动画效果。
进一步地，所述当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源的步骤，还包括：
根据所述网页访问请求将所述域名进行域名解析，以获取所述域名的IP地址；
根据所述IP地址访问与所述IP地址对应的网页资源服务器；
从所述网页资源服务器获取所述网页资源。
进一步地，所述对所述网页资源进行第一解析操作的步骤，包括：
对所述文本行进行第一解析操作以得到所述文本信息；
对所述图片块进行第一解析操作以得到所述图片信息。
进一步地，所述判断所述第一解析操作是否完成的步骤之后，还包括：
当判断所述第一解析操作完成时，则将所述文本信息和所述图片信息显示。
进一步地，所述对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤，还包括：
根据所述文本标签识别所述文本行，并解析所述文本行以得到第一尺寸信息，所述第一尺寸信息至少包括：第一高度与第一宽度。
进一步地，所述对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤，还包括：
根据所述图片标签识别所述图片块，并解析所述图片块以得到第二尺寸信息，所述第二尺寸信息至少包括：第二高度与第二宽度。
进一步地，所述对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤之后，还包括：
根据所述第一尺寸信息和所述第二尺寸信息生成所述多张背景图片。
为了实现上述目的，本发明实施例还提供一种骨架屏的生成系统，包括：
获取模块，用于当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名；
判断模块，用于对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成；
解析模块，用于当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息；
生成模块，用于根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中，所述骨架屏包括多张背景图片；
加载模块，用于加载所述骨架屏，并运行所述动画效果。
为了实现上述目的，本发明实施例还提供一种计算机设备，所述计算机设备包括存储器、处理器以及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上所述骨架屏的生成方法的步骤。
为了实现上述目的，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如上所述的骨架屏的生成方法的步骤。
本发明实施例提供的骨架屏的生成方法、系统、计算机设备及计算机可读存储介质，可以根据不同的页面布局自动生成骨架屏，还给骨架屏增插入了动画效果。当某一网页或者应用的页面布局需要改动时，开发人员无需重新编写骨架屏的代码，只要获取到改动后页面布局，就能根据页面布局自动地生成新的骨架屏，极大地提高了编写骨架屏的效率。
以下结合附图和具体实施例对本发明进行详细描述，但不作为对本发明的限定。
附图说明
图1为本发明实施例一之骨架屏的生成方法的步骤流程图；
图2为本发明实施例二之骨架屏的生成系统的程序模块示意图；
图3为本发明实施例三之计算机设备的硬件结构示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。
实施例一
请参阅图1，示出了本发明实施例一之骨架屏的生成方法的步骤流程图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以计算机设备为执行主体进行示例性描述，具体如下：
步骤S100，当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名。
具体地，通过监控浏览器的网页访问状态，例如，用户在浏览器地址栏输入一个域名并点击访问，或者点击现有网页中的一个链接，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求。需要说明的是，所述链接对应一个预设的域名。当监控到用户发起网页访问请求时，根据所述网页访问请求，访问所述域名对应的服务器，并从所述服务器中获取目标网页的网页资源。
示例性地，用户在浏览器地址栏中输入www.xxxxx.com并点击访问，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求；或者，用户已在浏览器中打开了www.xxxxx.com网页，然后点击网页中的“xx”链接，“xx”链接对应域名www.xxxxx.com/xxxx/xxx/lifeloan，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求。
在一较佳实施例中，当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源的步骤，还根据所述网页访问请求将所述域名进行域名解析，以获取所述域名的IP地址；然后根据所述IP地址访问与所述IP地址对应的网页资源服务器，并从所述网页资源服务器获取所述网页资源。
示例性地，用户在浏览器的地址栏中输入www.xxxxx.com并点击访问，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求。所述浏览器根据所述网页访问请求，对所述域名www.xxxxx.com进行解析，得到与所述域名www.xxxxx.com对应的IP地址[202.69.xx.xx]，然后根据所述IP地址[202.69.xx.xx]把所述网页访问请求发送给所述网页资源服务器。所述网页资源服务器根据所述网页访问请求查询对应的网页资源，然后把所述网页资源返回给所述浏览器所在的终端。
示例性地，所述网页资源可以是文本、图片、视频和/或按钮块等网页元素。所述页面布局具体指的是网页的宽度、高度、文本的位置和字体大小、图片的位置和尺寸。
步骤S102，对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成。
具体地，浏览器接收到所述网页资源后，对所述网页资源进行第一解析操作，以获取所述网页资源中文本和图片等网页元素。从所述浏览器接收到所述网页资源起开始计时，开启周期性判断，当时间间隔达到预设判断周期，则判断对所述网页资源的第一解析操作是否完成。
需要说明的，第一解析操作通过识别网页资源中的文本行标签来获取文本内容，通过识图片标签来获取图片，而图片通过链接存储在特定的存储空间中，获取图片的速度取决于图片的大小和网络连接的速度；当获取到的网页资源中图片较多时，第一解析操作所需的时间也会较长。
步骤S104，当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息。
在一较佳实施例中，当对所述网页资源的第一解析操作完成时，则将已解析得到的网页资源加载到浏览器界面。
在另一较佳实施例中，对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤，还包括：根据所述文本标签识别所述文本行，并解析所述文本行以得到第一尺寸信息，所述第一尺寸信息至少包括：第一高度与第一宽度。根据所述图片标签识别所述图片块，并解析所述图片块以得到第二尺寸信息，所述第二尺寸信息至少包括：第二高度与第二宽度。
具体地，例如，通过识别文本标签(NodeType为Node.TEXT_NODE)判断包含所述文本标签的网页元素为文本行。
然后，通过识别fontsize标签解析所述文本行的高度，所述fontsize标签是所述页面布局定义所述文本行高度的命令。所述文本行的高度在所述页面布局中使用设备独立像素PX表示，所述设备独立像素PX是一个虚拟长度单位。然后，获取所述文本行的字符串str，将所述字符串拆分成数组arr，然后遍历arr，分别求出数组中不同类型的字符个数。所述不同类型的字符个数包括但不限于中文个数、大写英文个数、小写英文个数、数字个数和符号个数。最后，根据所述页面布局中设置的各种类型字符的宽度，计算出所述数组的宽度，对所有数组的宽度求和，得到所述文本行的宽度。
又如，通过识别图片标签(img标签)判断包含所述img标签的网页元素为图片块，所述img元素是所述页面布局对图片类型的定义。然后，通过识别width和height来获取所述图片块的宽度和高度，所述width是所述页面布局对所述图片块宽度的定义，所述height是所述页面布局对所述图片块高度的定义。需要说明的是，本实施例仅以文本行和图片块作为常见网页元素进行示例性说明，所述网页元素还可以是按钮块、svg块、伪类元素块...，在此不一一进行说明。
步骤S106，根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中，所述骨架屏包括多张背景图片。
具体地，所述骨架屏包括多张用来占据网页中待显示元素位置的背景图片。所述预设规则用以设定所述骨架屏的背景图片的尺寸、所述背景图片的背景颜色、所述背景颜色的渐变方向和所述背景颜色的移动动作。
在一较佳实施例中，当浏览器解析完所述文本行和图片块后，分别以所述文本行的宽度、高度和所述图片块的高度、宽度定义所述背景图片的宽度和高度，然后将所述背景图片加载到所述文本行和图片块的位置。所述背景图片为一张像素为1px*1px的透明图片。然后，定义所述背景图片的背景颜色为渐变的rgb(207,216,220)。所述rgb(207,216,220)是三原色色彩模式，(207,216,220)表示红绿蓝三种颜色的色彩强度，所述渐变指的是所述背景颜色rgb(207,216,220)的透明度被设置为0.2、0.6、0.2三等份，0.2、0.6表征透明度为20％、60％，其中，0％为完全透明。
示例性地，预设有渐变的方向为90度，渐变的效果为所述背景图片的背景颜色在水平方向上平分成透明度分别为0.2、0.6、0.2的三部分。然后根据预设规则设置所述骨架屏的动画效果。
示例性地，所述预设规则可以是：所述背景颜色的整体沿着渐变的方向运动，当所述背景颜色左端透明度为0.2的部分运动到所述背景图片的最右端时，控制所述背景颜色整体沿着与渐变方向相反的返回，当其返回到最左端时，再控制其向着渐变的方向运动，如此往复。所述背景颜色的运动速度可以任意设置，例如，在本实施例中，所述运动速度设置为20px/s。设置所述骨架屏的动画效果后，将所述骨架屏保存到特定的存储区域。
步骤S108，加载所述骨架屏，并运行所述动画效果。
具体地，从所述特定的存储区域中调取所述骨架屏，然后将所述骨架屏加载到浏览器界面，并运行所述动画效果。同时，持续进行所述周期性判断，直到浏览器对所述网页资源的第一解析操作完成，并将解析得到的网页资源加载到浏览器界面。
本方案通过对网页资源进行解析，获取页面布局中的文本行、图片块等网页元素，从而根据这些网页元素自动生成对应的骨架屏，并为所述骨架屏添加动画效果。
实施例二
请参阅图2，示出了本发明实施例二之骨架屏的生成系统的程序模块示意图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。在本实施例中，骨架屏的生成系统20可以包括或被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本发明，并可实现上述骨架屏的生成方法。本发明实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序本身更适合于描述骨架屏的生成系统20在存储介质中的执行过程。以下描述将具体介绍本实施例各程序模块的功能：
获取模块200，用于当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名。
具体地，所述获取模块200通过监控浏览器的网页访问状态，例如，当用户在浏览器地址栏输入一个域名并点击访问，或者点击现有网页中的一个链接，则所述获取模块200监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求。需要说明的是，所述链接对应一个预设的域名。当所述获取模块200监控到用户发起网页访问请求时，根据所述网页访问请求，访问所述域名对应的服务器，并从所述服务器中获取目标网页的网页资源。
示例性地，用户在浏览器地址栏中输入www.xxxxx.com并点击访问，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求；或者，用户已在浏览器中打开了www.xxxxx.com网页，然后点击网页中的“xx”链接，“xx”链接对应域名www.xxxxx.com/xxxx/xxx/lifeloan，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求。
在一较佳实施例中，当所述获取模块200监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源的步骤中，所述获取模块200还根据所述网页访问请求将所述域名进行域名解析，以获取所述域名的IP地址；然后根据所述IP地址访问与所述IP地址对应的网页资源服务器，并从所述网页资源服务器获取所述网页资源。
示例性地，用户在浏览器地址栏中输入www.xxxxx.com并点击访问，则监控到所述浏览器处于访问的状态，并判断所述用户发起了网页访问请求。所述浏览器根据所述网页访问请求，对所述域名www.xxxxx.com进行解析，得到与所述域名www.xxxxx.com的对应的IP地址[202.69.xx.xx]，然后根据所述IP地址[202.69.xx.xx]把所述网页访问请求发送给所述网页资源服务器。所述网页资源服务器根据所述网页访问请求查询对应的网页资源，然后把所述网页资源返回给所述浏览器所在的终端。
示例性地，所述网页资源可以是文本、图片、视频和/或按钮块等网页元素。所述页面布局具体指的是网页的宽度、高度、文本的位置、字体的大小、图片的位置、图片的尺寸。
判断模块202，用于对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成。
具体地，浏览器接收到所述网页资源后，对所述网页资源进行第一解析操作，以获取所述网页资源中的文本和图片等的网页元素。所述判断模块202从所述浏览器接收到所述网页资源起开始计时，开启周期性判断，当时间间隔达到预设判断周期，则判断对所述网页资源的第一解析操作是否完成。
解析模块204，用于当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息。
在一较佳实施例中，当对所述网页资源的第一解析操作完成时，所述解析模块204将已解析得到的网页资源加载到浏览器界面。
在另一较佳实施例中，对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤，还包括：根据所述文本标签识别所述文本行，并解析所述文本行以得到第一尺寸信息，所述第一尺寸信息至少包括：第一高度与第一宽度。根据所述图片标签识别所述图片块，并解析所述图片块以得到第二尺寸信息，所述第二尺寸信息至少包括：第二高度与第二宽度。
具体地，例如，通过识别文本标签(NodeType为Node.TEXT_NODE)判断包含所述文本标签的网页元素为文本行。然后，通过识别fontsize标签解析所述文本行的高度，所述fontsize标签是所述页面布局定义所述文本行高度的命令。所述文本行的高度在所述页面布局中使用设备独立像素PX表示，所述设备独立像素PX是一个虚拟长度单位。进一步地，获取所述文本行的字符串str，将所述字符串拆分成数组arr，然后遍历arr，分别求出数组中不同类型的字符个数。所述不同类型的字符个数包括但不限于中文个数、大写英文个数、小写英文个数、数字个数和符号个数。最后，根据所述页面布局中设置的各种类型字符的宽度，计算出所述数组的宽度，对所有数组的宽度求和，得到所述文本行的宽度。
又如，通过识别图片标签(img标签)判断包含所述img标签的网页元素为图片块，所述img元素是所述页面布局对图片类型的定义。然后，通过识别width和height来获取所述图片块的宽度和高度，所述width是所述页面布局对所述图片块宽度的定义，所述height是所述页面布局对所述图片块高度的定义。需要说明的是，本实施例仅以文本行和图片块作为常见网页元素进行示例性说明，所述网页元素还可以是按钮块、svg块、伪类元素块...，在此不一一进行说明。
生成模块206，用于根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中，所述骨架屏包括多张背景图片。
具体地，所述骨架屏包括多张用来占据网页中待显示元素位置的背景图片。所述预设规则用以设定所述骨架屏的背景图片的尺寸、所述背景图片的背景颜色、所述背景颜色的渐变方向和所述背景颜色的移动动作。
在一较佳实施例中，当浏览器解析完所述文本行和图片块后，所述生成模块206分别以所述文本行的宽度、高度和所述图片块的高度、宽度定义所述背景图片的宽度和高度，然后将所述背景图片加载到所述文本行和图片块的位置。所述背景图片为一张像素为1px*1px的透明图片。然后，定义所述背景图片的背景颜色为渐变的rgb(207,216,220)。所述rgb(207,216,220)是三原色色彩模式，(207,216,220)表示红绿蓝三种颜色的色彩强度，所述渐变指的是所述背景颜色rgb(207,216,220)的透明度被设置为0.2、0.6、0.2三等份，0.2、0.6表征透明度为20％、60％，其中，0％为完全透明。
示例性地，预设有渐变的方向为90度，渐变的效果为所述背景图片的背景颜色在水平方向上平分成透明度分别为0.2、0.6、0.2的三部分。然后根据预设规则设置所述骨架屏的动画效果。
示例性地，所述预设规则可以是：所述背景颜色的整体沿着渐变的方向运动，当所述背景颜色左端透明度为0.2的部分运动到所述背景图片的最右端时，控制所述背景颜色整体沿着与渐变方向相反的返回，当其返回到最左端时，再控制其向着渐变的方向运动，如此往复。所述背景颜色的运动速度可以任意设置，例如，在本实施例中，所述运动速度设置为20px/s。设置所述骨架屏的动画效果后，将所述骨架屏保存到特定的存储区域。
加载模块208，用于加载所述骨架屏，并运行所述动画效果。
具体地，所述加载模块208从所述特定的存储区域中调取所述骨架屏，然后将所述骨架屏加载到浏览器界面，并运行所述动画效果。同时，持续进行所述周期性判断，直到浏览器解析完成所述网页资源，并将解析得到的网页资源加载到浏览器界面。
本方案通过对网页资源进行解析，获取页面布局中的文本行、图片块等网页元素，从而根据这些网页元素自动生成对应的骨架屏，并为所述骨架屏添加动画效果。
实施例三
参阅图3，是本发明实施例三之计算机设备的硬件架构示意图。本实施例中，所述计算机设备2是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。该计算机设备2可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图3所示，所述计算机设备2至少包括，但不限于，可通过系统总线相互通信连接存储器21、处理器22、网络接口23、以及骨架屏的生成系统20。其中：
本实施例中，存储器21至少包括一种类型的计算机可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器21可以是计算机设备2的内部存储单元，例如该计算机设备2的硬盘或内存。在另一些实施例中，存储器21也可以是计算机设备2的外部存储设备，例如该计算机设备2上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器21还可以既包括计算机设备2的内部存储单元也包括其外部存储设备。本实施例中，存储器21通常用于存储安装于计算机设备2的操作系统和各类应用软件，例如实施例二的骨架屏的生成系统20的程序代码等。此外，存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器22在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制计算机设备2的总体操作。本实施例中，处理器22用于运行存储器21中存储的程序代码或者处理数据，例如运行骨架屏的生成系统20，以实现实施例一的骨架屏的生成方法。
所述网络接口23可包括无线网络接口或有线网络接口，该网络接口23通常用于在所述计算机设备2与其他电子装置之间建立通信连接。例如，所述网络接口23用于通过网络将所述计算机设备2与外部终端相连，在所述计算机设备2与外部终端之间的建立数据传输通道和通信连接等。所述网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，GSM)、宽带码分多址(WidebandCode Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图3仅示出了具有部件20-23的计算机设备2，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器21中的所述骨架屏的生成系统20还可以被分割为一个或者多个程序模块，所述一个或者多个程序模块被存储于存储器21中，并由一个或多个处理器(本实施例为处理器22)所执行，以完成本发明。
例如，图2示出了所述骨架屏的生成系统20的程序模块示意图，该实施例中，所述骨架屏的生成系统20可以被划分为获取模块200、判断模块202、解析模块204、生成模块206和加载模块208。其中，本发明所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序更适合于描述所述骨架屏的生成系统20在所述计算机设备2中的执行过程。所述程序模块200-208的具体功能在实施例二中已有详细描述，在此不再赘述。
实施例四
本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储骨架屏的生成系统20，被处理器执行时实现实施例一的骨架屏的生成方法。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种骨架屏的生成方法，其特征在于，包括：
当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名；
对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成；
当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息；
根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中，所述骨架屏包括多张背景图片；
加载所述骨架屏，并运行所述动画效果。
2.根据权利要求1所述的骨架屏的生成方法，其特征在于，所述当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源的步骤，包括：
根据所述网页访问请求将所述域名进行域名解析，以获取所述域名的IP地址；
根据所述IP地址访问与所述IP地址对应的网页资源服务器；
从所述网页资源服务器获取所述网页资源。
3.根据权利要求1所述的骨架屏的生成方法，其特征在于，所述对所述网页资源进行第一解析操作的步骤，包括：
对所述文本行进行第一解析操作以得到所述文本信息；
对所述图片块进行第一解析操作以得到所述图片信息。
4.根据权利要求1所述的骨架屏的生成方法，其特征在于，所述判断所述第一解析操作是否完成的步骤之后，还包括：
当判断所述第一解析操作完成时，则将所述文本信息和所述图片信息显示。
5.根据权利要求1所述的骨架屏的生成方法，其特征在于，所述对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤，包括：
根据所述文本标签识别所述文本行，并解析所述文本行以得到第一尺寸信息，所述第一尺寸信息至少包括：第一高度与第一宽度。
6.根据权利要求5所述的骨架屏的生成方法，其特征在于，所述对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤，还包括：
根据所述图片标签识别所述图片块，并解析所述图片块以得到第二尺寸信息，所述第二尺寸信息至少包括：第二高度与第二宽度。
7.根据权利要求6所述的骨架屏的生成方法，其特征在于，所述对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局的步骤之后，还包括：
根据所述第一尺寸信息和所述第二尺寸信息生成所述多张背景图片。
8.一种骨架屏的生成系统，其特征在于，包括：
获取模块，用于当监控到用户发起网页访问请求时，获取与所述网页访问请求对应的网页资源，所述网页访问请求包括域名；
判断模块，用于对所述网页资源进行第一解析操作，并判断所述第一解析操作是否完成；
解析模块，用于当判断所述第一解析操作未完成时，则对所述网页资源进行第二解析操作以得到所述网页资源中的页面布局，其中所述网页资源至少包括文本行和图片块，所述文本行包括文本标签与文本信息，所述图片块包括图片标签与图片信息；
生成模块，用于根据所述页面布局生成骨架屏，并根据预设规则设置所述骨架屏的动画效果，其中，所述骨架屏包括多张背景图片；
加载模块，用于加载所述骨架屏，并运行所述动画效果。
9.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的骨架屏的生成方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如权利要求1至7中任一项所述的骨架屏的生成方法的步骤。
CN201911356156.2A 2019-12-25 2019-12-25 骨架屏的生成方法、系统、计算机设备及存储介质 Pending CN111159597A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911356156.2A CN111159597A (zh) 2019-12-25 2019-12-25 骨架屏的生成方法、系统、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911356156.2A CN111159597A (zh) 2019-12-25 2019-12-25 骨架屏的生成方法、系统、计算机设备及存储介质

Publications (1)

Publication Number Publication Date
CN111159597A true CN111159597A (zh) 2020-05-15

Family

ID=70558033

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911356156.2A Pending CN111159597A (zh) 2019-12-25 2019-12-25 骨架屏的生成方法、系统、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN111159597A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111708962A (zh) * 2020-06-23 2020-09-25 中国平安财产保险股份有限公司 骨架屏的渲染方法、装置、设备及存储介质
CN112182449A (zh) * 2020-09-07 2021-01-05 北京达佳互联信息技术有限公司 页面加载方法、装置、电子设备及存储介质
CN112905280A (zh) * 2021-02-07 2021-06-04 腾竞体育文化发展(上海)有限公司 页面显示方法、装置、设备及存储介质
CN113722010A (zh) * 2021-08-30 2021-11-30 平安国际智慧城市科技股份有限公司 骨架屏生成方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109254773A (zh) * 2018-09-19 2019-01-22 广州视源电子科技股份有限公司 骨架页面生成方法、装置、设备和存储介质
CN109992736A (zh) * 2019-03-20 2019-07-09 腾讯科技（深圳）有限公司 网页动态加载效果实现方法、装置、终端和存储介质
CN110377285A (zh) * 2019-07-23 2019-10-25 腾讯科技（深圳）有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN110516186A (zh) * 2019-08-15 2019-11-29 中国平安财产保险股份有限公司 页面骨架自动化生成方法、设备、存储介质及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109254773A (zh) * 2018-09-19 2019-01-22 广州视源电子科技股份有限公司 骨架页面生成方法、装置、设备和存储介质
CN109992736A (zh) * 2019-03-20 2019-07-09 腾讯科技（深圳）有限公司 网页动态加载效果实现方法、装置、终端和存储介质
CN110377285A (zh) * 2019-07-23 2019-10-25 腾讯科技（深圳）有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN110516186A (zh) * 2019-08-15 2019-11-29 中国平安财产保险股份有限公司 页面骨架自动化生成方法、设备、存储介质及装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111708962A (zh) * 2020-06-23 2020-09-25 中国平安财产保险股份有限公司 骨架屏的渲染方法、装置、设备及存储介质
CN112182449A (zh) * 2020-09-07 2021-01-05 北京达佳互联信息技术有限公司 页面加载方法、装置、电子设备及存储介质
CN112905280A (zh) * 2021-02-07 2021-06-04 腾竞体育文化发展(上海)有限公司 页面显示方法、装置、设备及存储介质
CN112905280B (zh) * 2021-02-07 2023-12-15 腾竞体育文化发展(上海)有限公司 页面显示方法、装置、设备及存储介质
CN113722010A (zh) * 2021-08-30 2021-11-30 平安国际智慧城市科技股份有限公司 骨架屏生成方法、装置、设备及存储介质
CN113722010B (zh) * 2021-08-30 2024-06-04 平安国际智慧城市科技股份有限公司 骨架屏生成方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN111159597A (zh) 骨架屏的生成方法、系统、计算机设备及存储介质
US10325012B2 (en) Filtered stylesheets
CN102591848B (zh) 基于背景的前景特性选择
CN102779167A (zh) 在移动终端中显示网页的方法及系统
CN110750664B (zh) 图片的显示方法及装置
CN111783007B (zh) 一种显示渲染方法、装置、电子设备及存储介质
CN114416056A (zh) 页面生成方法、系统、计算机设备及可读存储介质
CN111079048A (zh) 一种页面加载方法及装置
CN114218890A (zh) 页面渲染方法、装置、电子设备以及存储介质
CN110895481A (zh) 桌面应用的渲染方法、装置和系统
CN113553123B (zh) 数据处理方法、装置、电子设备及存储介质
CN105389308B (zh) 网页的显示处理方法及装置
US8818092B1 (en) Multi-threaded text rendering
CN113778393A (zh) 组件生成方法、装置、计算机系统和计算机可读存储介质
CN114756228A (zh) 页面处理方法、装置、设备及存储介质
CN117093386A (zh) 页面截图方法、装置、计算机设备和存储介质
CN116009863B (zh) 前端页面渲染方法、设备及存储介质
CN114020187B (zh) 字体图标的显示方法、装置及电子设备
CN109710869B (zh) 网页内容的分页展现方法、装置及服务器、存储介质
CN105260353A (zh) 一种移动终端的排版方法及装置
CN110187881B (zh) 一种异形窗口创建方法、系统、装置及计算机存储介质
CN108614805B (zh) 使用qml显示彩色表情的方法及系统、服务器及介质
CN110874253B (zh) 显示方法及显示系统
CN112328940A (zh) 网页嵌入过渡页的方法、装置、计算机设备及存储介质
CN102099806A (zh) 信息输出装置、信息输出方法和记录介质

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