网页动态加载效果实现方法、装置、终端和存储介质制造方法及图纸

本发明专利技术实施例公开了一种网页动态加载效果实现方法、装置、终端和存储介质，其中，所述方法包括，发送用于获取网页资源内容的网页资源获取请求，在用于显示网页资源内容的显示界面上，覆盖显示骨架结构元素，为骨架结构元素设置动态信息，并根据动态信息在骨架结构元素上显示动态加载效果，当接收到网页资源内容时，隐藏骨架结构元素，并在显示界面上显示网页资源内容。通过实施上述方法，可以在显示的骨架结构元素中添加整体的动态效果，实现网页的动态加载，提升了终端中网页加载过程的流畅性。

Implementation method, device, terminal and storage medium of dynamic loading effect of web pages

【技术实现步骤摘要】
网页动态加载效果实现方法、装置、终端和存储介质
本专利技术涉及计算机
，尤其涉及一种网页动态加载效果实现方法、装置、终端和存储介质。
技术介绍
骨架屏(SkeletonScreen)就是在页面尚未加载之前，为用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充需要进行显示的数据内容，通过为用户展现骨架屏，可以使得用户在骨架屏中获取到关注点，提升用户体验。然而，传统的骨架屏中文档对象模型(DocumentObjectMode，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)通过将骨架结构元素的背景图像的颜色设置为渐变色，以及对背景图像不断移动实现网页的动本文档来自技高网...

【技术保护点】
1.一种网页动态加载效果实现方法，其特征在于，所述方法包括：发送用于获取网页资源内容的网页资源获取请求；在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；为所述骨架结构元素设置动态信息，并根据所述动态信息在所述骨架结构元素上显示动态加载效果；当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。

【技术特征摘要】
1.一种网页动态加载效果实现方法，其特征在于，所述方法包括：发送用于获取网页资源内容的网页资源获取请求；在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素，所述骨架结构元素的颜色为第一预设颜色；为所述骨架结构元素设置动态信息，并根据所述动态信息在所述骨架结构元素上显示动态加载效果；当接收到所述网页资源内容时，隐藏所述骨架结构元素，并在所述显示界面上显示所述网页资源内容。2.根据权利要求1所述的方法，其特征在于，所述在用于显示所述网页资源内容的显示界面上，覆盖显示骨架结构元素之后，所述方法还包括：根据所述显示界面的结构特征对所述骨架结构元素进行区域划分，得到内容区域和空隙区域；对所述空隙区域进行填充，其中，用于对所述空隙区域进行填充的颜色为第二预设颜色。3.根据权利要求2所述的方法，其特征在于，所述对所述空隙区域进行填充，包括：根据预设的拆分规则将所述空隙区域拆分为至少一个空隙子区域；检测所述至少一个空隙子区域中每个空隙子区域的类别；若所述空隙子区域为第一类空隙子区域，则采用文档对象模型元素对所述空隙子区域进行填充，所述文档对象模型元素的颜色为第二预设颜色。4.根据权利要求3所述的方法，其特征在于，所述检测所述至少一个空隙子区域中每个空隙子区域的类别之后，所述方法还包括：若所述空隙子区域为第二类空隙子区域，则获取所述空隙子区域对应的遮罩图像，所述遮罩图像的颜色为第二预设颜色；采用所述遮罩图像对所述空隙子区域进行填充。5.根据权利要求4所述的方法，其特征在于，所述获取所述空隙子区域对应的遮罩图像，包括：获取所述空隙子区域的形状；根据所述空隙子区域的形状确定对应的遮罩图像；获取所述遮罩图像，并将所述遮罩图像的颜色设置为第二预...

【专利技术属性】
技术研发人员：程枫，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东,44