CN109992736A - 网页动态加载效果实现方法、装置、终端和存储介质 - Google Patents
网页动态加载效果实现方法、装置、终端和存储介质 Download PDFInfo
- Publication number
- CN109992736A CN109992736A CN201910211903.7A CN201910211903A CN109992736A CN 109992736 A CN109992736 A CN 109992736A CN 201910211903 A CN201910211903 A CN 201910211903A CN 109992736 A CN109992736 A CN 109992736A
- Authority
- CN
- China
- Prior art keywords
- skeleton structure
- structure element
- web page
- color
- page resources
- 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
Links
- 230000000694 effects Effects 0.000 title claims abstract description 66
- 238000000034 method Methods 0.000 title claims abstract description 54
- 239000011800 void material Substances 0.000 claims description 32
- 238000004590 computer program Methods 0.000 claims description 7
- 238000005194 fractionation Methods 0.000 claims description 4
- 238000001514 detection method Methods 0.000 claims 1
- 239000003086 colorant Substances 0.000 description 18
- 238000010586 diagram Methods 0.000 description 15
- 210000000988 bone and bone Anatomy 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 238000011160 research Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 239000000203 mixture Substances 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000750 progressive effect Effects 0.000 description 2
- 241000736199 Paeonia Species 0.000 description 1
- 235000006484 Paeonia officinalis Nutrition 0.000 description 1
- 239000006185 dispersion Substances 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- CNQCVBJFEGMYDW-UHFFFAOYSA-N lawrencium atom Chemical compound [Lr] CNQCVBJFEGMYDW-UHFFFAOYSA-N 0.000 description 1
- ORQBXQOJMQIAOY-UHFFFAOYSA-N nobelium Chemical compound [No] ORQBXQOJMQIAOY-UHFFFAOYSA-N 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例公开了一种网页动态加载效果实现方法、装置、终端和存储介质，其中，所述方法包括，发送用于获取网页资源内容的网页资源获取请求，在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果，当接收到网页资源内容时，隐藏骨架结构元素，并在显示界面上显示网页资源内容。通过实施上述方法，可以在显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种网页动态加载效果实现方法、装置、终端和存储介质。
背景技术
骨架屏(Skeleton Screen)就是在页面尚未加载之前，为用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充需要进行显示的数据内容，通过为用户展现骨架屏，可以使得用户在骨架屏中获取到关注点，提升用户体验。
然而，传统的骨架屏中文档对象模型(Document Object Mode，DOM)结构分散，无法对骨架屏结构添加整体效果，使得在加载数据内容的过程中流畅性较低。
发明内容
本发明实施例提供了一种网页动态加载效果实现方法、装置、终端和存储介质，可以为网页添加动态加载效果，提升网页加载过程的流畅性。
第一方面，本发明实施例提供了一种网页动态加载效果实现方法，所述方法包括：
发送用于获取网页资源内容的网页资源获取请求；
在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；
为所述骨架结构元素设置动态信息，并根据所述动态信息在所述骨架结构元素上显示动态加载效果；
当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。
第二方面，本发明实施例提供了一种网页动态加载效果实现装置，所述装置包括：
发送模块，用于发送用于获取网页资源内容的网页资源获取请求；
显示模块，用于在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；
设置模块，用于为所述骨架结构元素设置动态信息；
所述显示模块，还用于根据所述动态信息在所述骨架结构元素上显示动态加载效果；
所述显示模块，还用于当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。
第三方面，本发明实施例提供了一种终端，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行第一方面所述的方法。
第四方面，本发明实施例提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行第一方面所述的方法。
本发明实施例中，终端发送用于获取网页资源内容的网页资源获取请求，在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果，当终端接收到网页资源内容时，隐藏骨架结构元素，并在显示界面上显示网页资源内容。通过实施上述方法，可以在终端显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。
附图说明
为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种骨架屏的结构示意图；
图2是本发明实施例提供的一种网页动态加载效果实现方法的流程示意图；
图3是本发明实施例提供的一种骨架结构元素的移动示意图；
图4是本发明实施例提供的一种骨架结构元素动态加载实现方法的流程示意图；
图5是本发明实施例提供的另一种网页动态加载效果实现方法的流程示意图；
图6是本发明实施例提供的一种骨架结构元素的结构示意图；
图7是本发明实施例提供的一种骨架结构元素填充方法的流程示意图；
图8是本发明实施例提供的一种骨架结构元素的区域结构示意图；
图9是本发明实施例提供的另一种骨架结构元素的区域结构示意图；
图10是本发明实施例提供的一种网页动态加载效果实现装置的结构示意图；
图11是本发明实施例提供的一种终端的结构示意图。
具体实施方式
在用户上网的过程中，用户可以通过终端向服务器发送网页资源获取请求以获取到相应的网页资源，但网页资源获取请求一般会出现一定的延迟时间，在这段延迟时间中，网页会一直呈现加载状态，直到终端获取到相应的网页资源，用户在此期间无法针对终端执行任何操作，会给用户造成一种宕机的感觉，于是，骨架屏被用于在这段延迟时间中展示给用户，在网页加载时预先渲染出该网页的结构布局，在数据加载完成后再进行数据填充，可以使得用户在骨架屏中获取到关注点，提升了用户体验。其中，终端包括手机、电脑、平板电脑等电子设备。
本发明实施例的相关技术提及，目前的骨架屏通常采用多个DOM元素对显示界面进行覆盖，实现类似内容骨架的效果，然而，采用上述方式中实现骨架屏会导致DOM元素结构分散，无法为骨架屏添加整体的动态效果。如图1所示，为一种显示界面的骨架屏显示界面示意图，若按照传统方式实现上述骨架结构，则需要在显示界面中覆盖显示DOM元素101、DOM元素102、DOM元素103、和DOM元素104。由于上述骨架屏结构由4个分散的DOM元素组成，则终端无法为其设置整体的动态效果，只能以静态形式进行展示。
基于上述描述，本发明实施例提供一种网页动态加载效果实现方法，①终端接收用户输入网页资源获取请求。②终端发送用于获取网页资源内容的网页资源获取请求，具体实现中，终端可以向存储该网页资源的服务器发送网页资源获取请求。③终端在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，其中，骨架结构元素的颜色为第一预设颜色。具体的，第一预设颜色可以由待显示网页资源的主题颜色相同，或者，与浏览器的主题颜色相同，或者，由研发人员预先设置。④终端对骨架结构元素进行区域划分，得到内容区域和空隙区域，并对空隙区域进行填充。其中，终端可以基于显示界面的结构特征对骨架结构元素进行区域划分，或者，终端基于待显示的网页资源内容的结构特征对骨架结构元素进行区域划分，待显示的网页资源即为网页资源获取请求对应的网页资源。或者，终端结合显示界面的结构特征和待显示的网页资源内容的结构特征对骨架结构元素进行区域划分。填充的颜色可以为第二预设颜色，具体可以与终端中显示界面的背景颜色相同，通过上述对空隙区域填充的方式，可以使得骨架结构元素显示出任意的形状。⑤终端为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果。其中，动态信息具体可以为骨架结构元素的背景图像的属性，其中，背景图像的属性包括背景图像的颜色、背景图像的尺寸和背景图像的显示时长与显示位置的对应关系，背景图像的颜色为渐变色，动态加载效果可以是水波效果。终端在显示骨架结构元素的过程中，根据背景图像的显示时长与显示位置的对应关系来不断改变骨架结构元素的背景图像的位置来实现类似水波的动画效果，实现网页资源内容的动态加载。⑥当终端接收到网页资源内容时，终端隐藏骨架结构元素，并在显示界面上显示网页资源内容。
综上可知，本发明实施例提供的网页动态加载效果实现方法至少具备以下优点：(1)采用对骨架结构元素进行填充的方式使得骨架结构元素展现任意形状。(2)通过为整体的骨架结构元素添加动态效果实现网页整体的动态加载效果。(3)通过将骨架结构元素的背景图像的颜色设置为渐变色，以及对背景图像不断移动实现网页的动态加载效果。
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参见图2，为本发明实施例提供的一种网页动态加载效果实现方法的流程示意图。
S201、终端发送用于获取网页资源内容的网页资源获取请求。
本发明实施例中，用户可以在终端中输入预设操作，如打开网页浏览页面、打开APP应用等，终端检测到用户的预设操作之后，将根据用户的操作生成相应的用于获取网页资源内容的网页资源获取请求，并将生成的网页资源获取请求进行发送，具体可以发送至服务器。其中，服务器可以为用户的预设操作中网址对应的后台服务器，或者，用户通过预设操作打开的APP应用程序的后台服务器等。
S202、终端在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素。
本发明实施例中，当终端向服务器发送网页资源获取请求之后，将在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，其中，骨架结构元素的颜色为第一预设颜色。骨架结构元素具体可以为一个DOM元素，DOM元素可以是一个段落(paragraph，p)元素或者层叠样式表单元的位置和层次(division，div)元素，DOM元素覆盖显示在用于显示网页资源内容的显示界面上，其中，p元素用于在显示界面中放置文本，div元素具体用来为超文本标记语言(Hyper Text Markup Language，HTML)文档内大块(block-level)的内容提供结构和背景，第一预设颜色可以为灰色、红色、蓝色等，具体可以由研发人员预先设置。
S203、终端为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果。
本发明实施例中，动态信息具体可以为骨架结构元素的背景图像的属性，其中，背景图像的属性包括背景图像的颜色、背景图像的尺寸、背景图像的显示时长与显示位置的对应关系，背景图像的颜色为渐变色，动态加载效果可以是水波效果。需要说明的是，骨架结构元素对应的背景图像的颜色为渐变色，骨架结构元素对应的背景图像的尺寸大于或等于所述骨架结构元素的尺寸，其具体可以为，宽度与骨架结构元素的宽度相同，长度大于骨架结构元素的长度，骨架结构元素对应的背景图像的显示时长与显示位置的对应关系可以为，显示时长每增加预设时长，则显示位置沿预设方向相应移动预设距离，例如，预设时长为0.01秒，预设方向为水平向右，预设距离为10px，则若骨架结构的背景图像的初始位置-468px0，间隔0.01秒后，骨架结构的背景图像对应的位置为-458px0。或者，为了使水波效果中水波的速度更快，可以将预设时长设置为0.01秒，预设方向为水平向右，预设距离为20px，则若骨架结构的背景图像的初始位置-468px0，间隔0.01秒后，骨架结构的背景图像对应的位置为-448px0，其中，1px代表1像素。
如图3所示，为本发明实施例提供的一种骨架结构元素的移动示意图，图3中301为骨架结构元素，302为骨架结构元素的背景图像的初始位置，303为显示时长为0.2秒时骨架结构元素的背景图像所在的位置，304为显示时长为0.4秒时骨架结构元素的背景图像所在的位置。需要说明的是，骨架结构元素的位置固定不变，在实际显示中，可以将骨架结构元素的长度设置为与终端显示的显示屏的长度相同，则终端在显示过程中只会显示骨架屏结构元素部分，而在该部分之外的背景图像不会被显示，又由于背景图像为渐变色，且图像的位置随显示时长而改变，则终端会显示类似水波的动态加载效果。
S204、当终端接收到网页资源内容时，隐藏骨架结构元素，并在显示界面上显示网页资源内容。
本发明实施例中，当终端接收到服务器返回的网页资源内容时，将对当前显示界面中显示的骨架结构元素进行隐藏，并显示获取到的网页资源内容。
本发明实施例中，终端发送用于获取网页资源内容的网页资源获取请求；在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，终端为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果；当接收到网页资源内容时，隐藏骨架结构元素，并在显示界面上显示网页资源内容。通过实施上述方法，可以在显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。
请参见图4，为图2所示的步骤S203的一个实施例的流程图，本实施例中步骤S203可以包括：
S401、终端将骨架结构元素的背景图像的颜色设置为渐变色。
本发明实施例中，渐变色的具体可以由待显示的网页资源的主题颜色所确定，或者，渐变色的具体可以由浏览器的主题颜色所确定，或者，渐变色的具体可以由研发人员预先设定。
在一种实现方式中，渐变色由待显示的网页资源的主题颜色所确定，具体可以与待显示网页资源的主题颜色相近，使得渐变色的风格与待显示的网页资源的风格统一。例如，待显示的网页资源的主题颜色为蓝色，则渐变色可以为以蓝色为主体的渐变色，如由浅蓝色到深蓝色的递进色彩。或者，为了使得骨架结构元素中的水波效果更为醒目，也可以预先设置与待显示的网页资源的主题颜色构成视觉反差的颜色作为渐变色，例如，预先建立主题颜色与渐变色的对应关系，例如，主题颜色为红色，则对应的渐变色为以蓝色为主体的渐变色，或者，主题颜色为黄色，则对应的渐变色为以绿色为主体的渐变色。其中，待显示的网页资源的主题颜色的具体获取方式可以为，终端向服务器发送网页资源获取请求之后，将首先接收服务器返回的待显示的网页资源的主题颜色，并根据接收到的颜色显示相应颜色的骨架结构元素。或者，终端从历史浏览记录中记录的信息中获取到待显示网页资源的主题颜色。
在一种实现方式中，渐变色的具体确定方式也可以由浏览器的主题颜色所确定，具体可以为选取渐变色使得渐变色的风格与浏览器的风格统一，例如，浏览器的主题颜色为红色，则渐变色可以为以红色为主题的渐变色，如由深红色到浅红色的递进色彩。或者，为了使得骨架结构元素中的水波效果更为醒目，也可以预先设置与浏览器颜色构成视觉反差的颜色作为渐变色。例如，主题颜色为红色，则渐变色可以为以蓝色为主体的渐变色。
需要说明的是，主题颜色具体可以为待显示的网页资源或浏览器中颜色组成最多的部分，例如，待显示网页资源中红色占比20％，绿色占比30％，蓝色占比50％，则可以将主题颜色确定为蓝色。
S402、终端将背景图像的尺寸设置为大于或等于骨架结构元素的尺寸。
本发明实施例中，终端将获取到骨架结构元素的尺寸，并将骨架元素的背景图像的尺寸设置为大于或等于所述骨架结构元素的尺寸。具体的实现方式可以为，终端将骨架元素的背景图像的宽度设置为骨架结构元素的宽度，将骨架元素的背景图像的长度设置为骨架结构元素的长度。
S403、终端为骨架结构元素的背景图像设置显示时长与显示位置的对应关系。
本发明实施例中，骨架结构元素对应的背景图像的显示时长与显示位置的对应关系可以为，显示时长每增加预设时长，则显示位置沿预设方向相应移动预设距离。
S404、终端根据显示时长与显示位置的对应关系改变背景图像的显示位置。
本发明实施例中，终端根据显示时长与显示位置的对应关系改变背景图像的显示位置，可以在骨架结构元素中实现类似水波的动画效果。
本发明实施例描述了如何具体的在骨架结构元素中设置动态信息，以及根据动态信息在骨架结构元素上显示动态加载效果，通过上述方式，可以使得网页加载过程为一个动态过程，提升网页加载的流畅性。
如图5所示，为本发明实施例提供的另一种网页动态加载效果实现方法的流程示意图。
S501、终端发送用于获取网页资源内容的网页资源获取请求。
本发明实施例中，用户可以在终端中输入预设操作，如打开网页浏览页面、打开APP应用等，终端检测到用户的预设操作之后，将根据用户的操作生成相应的用于获取网页资源内容的网页资源获取请求，并将生成的网页资源获取请求发送至服务器。
S502、终端在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素。
本发明实施例中，当终端向服务器发送网页资源获取请求之后，将在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，其中，骨架结构元素的颜色为第一预设颜色。骨架结构元素具体可以为一个DOM元素，第一预设颜色可以为灰色、红色、蓝色等，具体可以由研发人员预先设置。
S503、终端根据显示界面的结构特征对骨架结构元素进行区域划分，得到内容区域和空隙区域。
本发明实施例中，终端将获取显示界面的结构特征，并根据显示界面的结构特征对骨架结构元素进行区域划分，得到内容区域和空隙区域。其中，显示界面的结构特征包括显示界面尺寸和形状。其中，结构特征可以与骨架结构元素中的内容区域和空隙区域存在一一对应关系，即不同的结构特征对应不同的骨架结构元素中的内容区域和空隙区域。
在一种实现方式中，终端还可以结合显示界面的结构特征以及浏览器的类型确定骨架结构元素中的内容区域和空隙区域，即在同一终端中，针对不同的浏览器，其对应的骨架结构元素中内容区域和空隙区域也可也不同。
在一种实现方式中，终端还可以结合显示界面的结构特征以及待显示的网页资源内容确定骨架结构元素中的内容区域和空隙区域。具体实现中，终端发送网页资源获取请求之后，将首先获取到该网页资源获取请求对应的网页资源的大致结构，并结合显示界面的结构特征以及网页资源的大致结构确定骨架结构元素中的内容区域和空隙区域。
S504、终端对空隙区域进行填充。
本发明实施例中，终端确定骨架结构元素中的内容区域和间隙区域之后，将对空隙区域进行填充，其中，用于对空隙区域进行填充的颜色为第二预设颜色，第二预设颜色具体可以为白色、绿色等，具体可以与显示界面的背景颜色相同，例如，显示界面的背景颜色为白色，则将第二预设颜色确定为白色，若显示界面的背景颜色为绿色，则将第二预设颜色确定为绿色，需要说明的是，第二预设颜色与第一预设颜色不相同。通过对骨架结构元素进行填充的方式，可以使得骨架结构元素展现出任意形状。请参见图6，在图6a中，显示界面的背景颜色为白色，骨架结构元素为一个灰色DOM元素601，其中，内容区域为区域602、区域603、区域604和区域605，空隙区域为区域606，终端采用白色对空隙区域进行填充，即可实现与图1相同的骨架屏形态，如6b所示。
S505、终端为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果。
本发明实施例中，动态信息具体可以为骨架结构元素的背景图像的属性，其中，背景图像的属性包括背景图像的颜色、背景图像的尺寸和背景图像的显示时长与显示位置的对应关系，背景图像的颜色为渐变色，动态加载效果可以是水波效果。需要说明的是，骨架结构元素对应的背景图像的显示时长与显示位置的对应关系可以为，显示时长每增加预设时长，则显示位置沿预设方向相应移动预设距离，终端根据显示时长与显示位置的对应关系对骨架结构元素的背景图像进行移动，以实现在骨架结构元素上显示动态加载效果。
S506、当终端接收到网页资源内容时，终端隐藏骨架结构元素，并在显示界面上显示网页资源内容。
本发明实施例中，当终端接收到服务器返回的网页资源内容时，将对当前显示界面中显示的骨架结构元素进行隐藏，并显示获取到的网页资源内容。
本发明实施例中，终端发送用于获取网页资源内容的网页资源获取请求；在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，终端为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果；当接收到网页资源内容时，隐藏骨架结构元素，并在显示界面上显示网页资源内容。通过实施上述方法，可以在显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。
请参见图7，为图5所示的步骤S504的一个实施例的流程图，本实施例中步骤S504可以包括：
S701、终端根据预设的拆分规则将空隙区域拆分为至少一个空隙子区域。
本发明实施例中，终端对空隙区域进行填充的具体方式可以为，终端根据预设的拆分规则将空隙区域拆分为至少一个空隙子区域。其中，每个空隙子区域可以采用DOM元素进行填充或者遮罩图像进行填充。
S702、终端检测至少一个空隙子区域中每个空隙子区域的类别。
本发明实施例中，终端将空隙区域拆分为至少一个空隙子区域之后，将检测每个空隙子区域的类别，其中，空隙子区域包括第一类空隙子区域和第二类空隙子区域，第一类空隙子区域可以为矩形区域，即可以采用DOM元素进行填充的区域，第二类空隙子区域为非矩形区域，即需要选取相应的遮罩图像进行填充的区域。如图8所示，第一类空隙子区域包括区域801、区域802、区域803、区域804、区域805、区域806、区域807，第二类空隙子区域包括区域808和区域809。
S703、若空隙子区域为第一类空隙子区域，则终端采用文档对象模型元素对空隙子区域进行填充。
本发明实施例中，一个文档对象模型DOM元素可以由一个div元素组成，终端采用DOM元素对所述空隙子区域进行填充的具体方式为，终端获取空隙子区域所在的位置、形状和尺寸，并在该位置处添加一个空隙子区域形状和尺寸都相同的DOM元素，使得DOM元素对该空隙子区域进行覆盖，终端将该DOM元素的颜色设置为第二预设颜色，其中，第二预设颜色与显示界面的背景颜色相同，如显示界面的背景颜色为白色，则第二预设颜色为白色。
S704、若空隙子区域为第二类空隙子区域，则终端获取空隙子区域对应的遮罩图像，并采用遮罩图像对所述空隙子区域进行填充。
本发明实施例中，若空隙子区域为第二类空隙子区域，即空隙子区域的形状不为矩形，则终端无法采用常规的DOM元素对其进行填充，则终端获取该空隙区域对应的遮罩图像，具体的，终端可以获取空隙子区域的形状，并根据空隙子区域的形状确定对应的遮罩图像，终端获取到该遮罩图像，并将遮罩图像的颜色设置为第二预设颜色。例如，如图9所示，骨架结构元素为901，内容区域为圆形区域902，空隙子区域为骨架结构元素中除圆形区域外的区域903，终端获取到该空隙子区域对应遮罩图像904，其中，并将该遮罩图像904覆盖于骨架结构元素为901中，即可使得骨架机构元素最终显示圆形形状，如905所示。
本发明实施例中，终端通过在骨架结构元素中采用区域划分以及区域填充的方式，可以使得骨架结构元素展现任意样式的形态，提升了骨架结构的显示多样性。
下面将结合附图10对本发明实施例提供的网页动态加载效果实现装置进行详细介绍。需要说明的是，附图10所示的网页动态加载效果实现装置，用于执行本发明图1-9所示实施例的方法，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，经参照本发明图1-9所示的实施例。
请参见图10，为本发明提供的一种网页动态加载效果实现装置的结构示意图，该网页动态加载效果实现装置100可包括：发送模块1001、显示模块1002、设置模块1003。
发送模块1001，用于发送用于获取网页资源内容的网页资源获取请求；
显示模块1002，用于在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；
设置模块1003，用于为所述骨架结构元素设置动态信息；
所述显示模块1002，还用于根据所述动态信息在所述骨架结构元素上显示动态加载效果；
所述显示模块1002，还用于当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。
在一种实现方式中，所述设置模块1003，还用于：
根据所述显示界面的结构特征对所述骨架结构元素进行区域划分，得到内容区域和空隙区域；
对所述空隙区域进行填充，其中，用于对所述空隙区域进行填充的颜色为第二预设颜色。
在一种实现方式中，所述设置模块1003，还用于：
根据预设的拆分规则将所述空隙区域拆分为至少一个空隙子区域；
检测所述至少一个空隙子区域中每个空隙子区域的类别；
若所述空隙子区域为第一类空隙子区域，则采用文档对象模型元素对所述空隙子区域进行填充，所述文档对象模型元素的颜色为第二预设颜色。
在一种实现方式中，所述设置模块1003，具体用于：
若所述空隙子区域为第二类空隙子区域，则获取所述空隙子区域对应的遮罩图像，所述遮罩图像的颜色为第二预设颜色；
采用所述遮罩图像对所述空隙子区域进行填充。
在一种实现方式中，所述设置模块1003，具体用于：
获取所述空隙子区域的形状；
根据所述空隙子区域的形状确定对应的遮罩图像；
获取所述遮罩图像，并将所述遮罩图像的颜色设置为第二预设颜色。
在一种实现方式中，所述设置模块1003，具体用于：
为所述骨架结构元素设置背景图像的属性，所述背景图像的属性包括显示时长与显示位置的对应关系；
所述显示模块1002，还用于：
根据所述背景图像的属性改变所述背景图像的显示位置，以便于在所述骨架结构元素上显示动态加载效果。
在一种实现方式中，所述背景图像的属性还包括背景图像的颜色和/或尺寸，所述设置模块1003还用于：
将所述背景图像的颜色设置为渐变色；
将所述背景图像的尺寸设置为大于或等于所述骨架结构元素的尺寸。
本发明实施例中，发送模块1001发送用于获取网页资源内容的网页资源获取请求，显示模块1002在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，设置模块1003为骨架结构元素设置动态信息，显示模块1002根据动态信息在骨架结构元素上显示动态加载效果，当接收到所述网页资源内容时，显示模块1002隐藏骨架结构元素，并在显示界面上显示所述网页资源内容。通过实施上述方法，可以在显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。
请参见图11，为本发明实施例提供的一种终端的结构示意图。如图11所示，该终端包括：至少一个处理器1101，输入设备1103，输出设备1104，存储器1105，至少一个通信总线1102。其中，通信总线1102用于实现这些组件之间的连接通信。其中，输入设备1103可以是控制面板或者麦克风等，输出设备1104可以是显示屏等。其中，存储器1105可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器1105可选的还可以是至少一个位于远离前述处理器1101的存储装置。其中处理器1101可以结合图10所描述的装置，存储器1105中存储一组程序代码，且处理器1101，输入设备1103，输出设备1104调用存储器1105中存储的程序代码，用于执行以下操作：
输出设备1104，用于发送用于获取网页资源内容的网页资源获取请求；
处理器1101，用于在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；
处理器1101，用于为所述骨架结构元素设置动态信息，并根据所述动态信息在所述骨架结构元素上显示动态加载效果；
处理器1101，用于当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。
在一种实现方式中，处理器1101，具体用于：
根据所述显示界面的结构特征对所述骨架结构元素进行区域划分，得到内容区域和空隙区域；
对所述空隙区域进行填充，其中，用于对所述空隙区域进行填充的颜色为第二预设颜色。
在一种实现方式中，处理器1101，具体用于：
根据预设的拆分规则将所述空隙区域拆分为至少一个空隙子区域；
检测所述至少一个空隙子区域中每个空隙子区域的类别；
若所述空隙子区域为第一类空隙子区域，则采用文档对象模型元素对所述空隙子区域进行填充，所述文档对象模型元素的颜色为第二预设颜色。
在一种实现方式中，处理器1101，具体用于：
若所述空隙子区域为第二类空隙子区域，则获取所述空隙子区域对应的遮罩图像，所述遮罩图像的颜色为第二预设颜色；
采用所述遮罩图像对所述空隙子区域进行填充。
在一种实现方式中，处理器1101，具体用于：
获取所述空隙子区域的形状；
根据所述空隙子区域的形状确定对应的遮罩图像；
获取所述遮罩图像，并将所述遮罩图像的颜色设置为第二预设颜色。
在一种实现方式中，处理器1101，具体用于：
为所述骨架结构元素设置背景图像的属性，所述背景图像的属性包括显示时长与显示位置的对应关系；
根据所述背景图像的属性改变所述背景图像的显示位置，以便于在所述骨架结构元素上显示动态加载效果。
在一种实现方式中，处理器1101，具体用于：
将所述背景图像的颜色设置为渐变色；
将所述背景图像的尺寸设置为大于或等于所述骨架结构元素的尺寸。
本发明实施例中，输出设备1104发送用于获取网页资源内容的网页资源获取请求，处理器1101在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，处理器1101为骨架结构元素设置动态信息，处理器1101根据动态信息在骨架结构元素上显示动态加载效果，当接收到所述网页资源内容时，处理器1101隐藏骨架结构元素，并在显示界面上显示所述网页资源内容。通过实施上述方法，可以在显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。
本发明实施例中所述模块，可以通过通用集成电路，例如CPU(CentralProcessing Unit，中央处理器)，或通过ASIC(Application Specific IntegratedCircuit，专用集成电路)来实现。
应当理解，在本发明实施例中，所称处理器1101可以是中央处理模块(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
总线1102可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外部设备互联(Peripheral Component，PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture，EISA)总线等，该总线1102可以分为地址总线、数据总线、控制总线等，为便于表示，图11仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的计算机可读存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(RandomAccess Memory，RAM)等。
以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。
Claims (10)
1.一种网页动态加载效果实现方法，其特征在于，所述方法包括：
发送用于获取网页资源内容的网页资源获取请求；
在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；
为所述骨架结构元素设置动态信息，并根据所述动态信息在所述骨架结构元素上显示动态加载效果；
当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。
2.根据权利要求1所述的方法，其特征在于，所述在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素之后，所述方法还包括：
根据所述显示界面的结构特征对所述骨架结构元素进行区域划分，得到内容区域和空隙区域；
对所述空隙区域进行填充，其中，用于对所述空隙区域进行填充的颜色为第二预设颜色。
3.根据权利要求2所述的方法，其特征在于，所述对所述空隙区域进行填充，包括：
根据预设的拆分规则将所述空隙区域拆分为至少一个空隙子区域；
检测所述至少一个空隙子区域中每个空隙子区域的类别；
若所述空隙子区域为第一类空隙子区域，则采用文档对象模型元素对所述空隙子区域进行填充，所述文档对象模型元素的颜色为第二预设颜色。
4.根据权利要求3所述的方法，其特征在于，所述检测所述至少一个空隙子区域中每个空隙子区域的类别之后，所述方法还包括：
若所述空隙子区域为第二类空隙子区域，则获取所述空隙子区域对应的遮罩图像，所述遮罩图像的颜色为第二预设颜色；
采用所述遮罩图像对所述空隙子区域进行填充。
5.根据权利要求4所述的方法，其特征在于，所述获取所述空隙子区域对应的遮罩图像，包括：
获取所述空隙子区域的形状；
根据所述空隙子区域的形状确定对应的遮罩图像；
获取所述遮罩图像，并将所述遮罩图像的颜色设置为第二预设颜色。
6.根据权利要求1所述的方法，其特征在于，所述为所述骨架结构元素设置动态信息，并根据所述动态信息在所述骨架结构元素上显示动态加载效果，包括：
为所述骨架结构元素设置背景图像的属性，所述背景图像的属性包括显示时长与显示位置的对应关系；
根据所述背景图像的属性改变所述背景图像的显示位置，以便于在所述骨架结构元素上显示动态加载效果。
7.根据权利要求6所述的方法，其特征在于，所述背景图像的属性还包括背景图像的颜色和/或尺寸，所述设置所述背景的属性，包括：
将所述背景图像的颜色设置为渐变色；
将所述背景图像的尺寸设置为大于或等于所述骨架结构元素的尺寸。
8.一种网页动态加载效果实现装置，其特征在于，所述装置包括：
发送模块，用于发送用于获取网页资源内容的网页资源获取请求；
显示模块，用于在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；
设置模块，用于为所述骨架结构元素设置动态信息；
所述显示模块，还用于根据所述动态信息在所述骨架结构元素上显示动态加载效果；
所述显示模块，还用于当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。
9.一种终端，其特征在于，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行如权利要求1-7任一项所述的方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-7任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910211903.7A CN109992736A (zh) | 2019-03-20 | 2019-03-20 | 网页动态加载效果实现方法、装置、终端和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910211903.7A CN109992736A (zh) | 2019-03-20 | 2019-03-20 | 网页动态加载效果实现方法、装置、终端和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109992736A true CN109992736A (zh) | 2019-07-09 |
Family
ID=67130625
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910211903.7A Pending CN109992736A (zh) | 2019-03-20 | 2019-03-20 | 网页动态加载效果实现方法、装置、终端和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109992736A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795195A (zh) * | 2019-10-31 | 2020-02-14 | 百度在线网络技术（北京）有限公司 | 一种网页渲染方法、装置、电子设备及存储介质 |
| CN111159597A (zh) * | 2019-12-25 | 2020-05-15 | 平安养老保险股份有限公司 | 骨架屏的生成方法、系统、计算机设备及存储介质 |
| CN111898056A (zh) * | 2020-08-28 | 2020-11-06 | 北京三快在线科技有限公司 | 一种网页显示方法、装置、存储介质及电子设备 |
| CN114489901A (zh) * | 2022-01-25 | 2022-05-13 | 北京百度网讯科技有限公司 | 计时进度显示方法、装置、设备以及存储介质 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104965691A (zh) * | 2014-04-18 | 2015-10-07 | 腾讯科技（深圳）有限公司 | 配置网页页面的页面元素的方法、装置及系统 |
| CN105373520A (zh) * | 2015-10-13 | 2016-03-02 | 金蝶软件（中国）有限公司 | 设置控件样式属性的方法和装置 |
| CN106294339A (zh) * | 2015-05-12 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 应用中加载图片的方法及装置 |
| US10002115B1 (en) * | 2014-09-29 | 2018-06-19 | Amazon Technologies, Inc. | Hybrid rendering of a web page |
| CN109254773A (zh) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | 骨架页面生成方法、装置、设备和存储介质 |
| CN109298864A (zh) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | 教育平台下的自动化生成项目骨架屏的方法及电子设备 |
-
2019
- 2019-03-20 CN CN201910211903.7A patent/CN109992736A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104965691A (zh) * | 2014-04-18 | 2015-10-07 | 腾讯科技（深圳）有限公司 | 配置网页页面的页面元素的方法、装置及系统 |
| US10002115B1 (en) * | 2014-09-29 | 2018-06-19 | Amazon Technologies, Inc. | Hybrid rendering of a web page |
| CN106294339A (zh) * | 2015-05-12 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 应用中加载图片的方法及装置 |
| CN105373520A (zh) * | 2015-10-13 | 2016-03-02 | 金蝶软件（中国）有限公司 | 设置控件样式属性的方法和装置 |
| CN109298864A (zh) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | 教育平台下的自动化生成项目骨架屏的方法及电子设备 |
| CN109254773A (zh) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | 骨架页面生成方法、装置、设备和存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| IMWEB前端社区: "教你实现超流行的骨架屏预加载动态效果", 《HTTPS://WWW.ZHUANZHI.AI/DOCUMENT/1D3521993DDD425973F30C3C878153F9》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795195A (zh) * | 2019-10-31 | 2020-02-14 | 百度在线网络技术（北京）有限公司 | 一种网页渲染方法、装置、电子设备及存储介质 |
| CN110795195B (zh) * | 2019-10-31 | 2023-09-26 | 百度在线网络技术（北京）有限公司 | 一种网页渲染方法、装置、电子设备及存储介质 |
| CN111159597A (zh) * | 2019-12-25 | 2020-05-15 | 平安养老保险股份有限公司 | 骨架屏的生成方法、系统、计算机设备及存储介质 |
| CN111898056A (zh) * | 2020-08-28 | 2020-11-06 | 北京三快在线科技有限公司 | 一种网页显示方法、装置、存储介质及电子设备 |
| CN114489901A (zh) * | 2022-01-25 | 2022-05-13 | 北京百度网讯科技有限公司 | 计时进度显示方法、装置、设备以及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109992736A (zh) | 网页动态加载效果实现方法、装置、终端和存储介质 | |
| CN106484396B (zh) | 夜间模式切换方法、装置和终端设备 | |
| CN107239287B (zh) | 一种网页显示方法、装置、电子设备及存储介质 | |
| CN105608161B (zh) | 一种加载进度的显示方法及终端 | |
| CN104765614B (zh) | 填色处理方法及装置 | |
| CN102591848B (zh) | 基于背景的前景特性选择 | |
| CA2823170C (en) | Immersive mode for a web browser | |
| CN109643241B (zh) | 显示处理方法、装置、存储介质及电子终端 | |
| CN107818008B (zh) | 页面加载方法及装置 | |
| EP2871560B1 (en) | Image processing method and apparatus | |
| CN108228121B (zh) | 一种浏览器分屏的方法、装置及移动终端 | |
| CN109165364B (zh) | 一种页面渲染方法、装置、设备和存储介质 | |
| US20150331558A1 (en) | Method for switching pictures of picture galleries and browser | |
| CN109785408B (zh) | 一种填图方法、装置及电子设备 | |
| CN107908452A (zh) | 多页面启动方法及装置 | |
| CN110866208B (zh) | 一种页面的响应式布局方法、装置及设备 | |
| US20190113969A1 (en) | Computing device accessibility via eye tracking | |
| CN106156132B (zh) | 图片加载显示方法和装置 | |
| CN106373537A (zh) | 一种减弱显示画面拖影的方法及装置 | |
| CN105739936B (zh) | 一种用户终端控制方法及用户终端 | |
| CN109146783A (zh) | 一种图片拼接方法、装置、电子设备及介质 | |
| EP2881847A1 (en) | Method and device for transversely laying out list component on terminal | |
| CN108134906A (zh) | 图像处理方法及其系统 | |
| CN106909367A (zh) | 一种终端设备中的桌面显示方法和装置 | |
| WO2020024385A1 (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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190709 |