网页加载显示方法、装置、终端设备及可读存储介质制造方法及图纸

本发明专利技术涉及一种网页加载显示方法、装置、终端设备及可读存储介质，所述网页加载显示方法包括如下步骤：向服务器获取待显示网页；解析显示所述网页，其中，将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示；响应于页面滚动事件，判断每个占位背景图与可视区域的相对位置关系，使可视区域内的占位背景图被替换为目标格式的所述原始图片予以显示。本发明专利技术旨在避免一次性加载浪费过多的网络请求，并将压缩率不高、尺寸较大的图片转换成高压缩率、小尺寸的目标格式图片，从而提高加载效率，提升用户体验。

【技术实现步骤摘要】
网页加载显示方法、装置、终端设备及可读存储介质
本专利技术涉及互联网
，尤其涉及一种网页加载显示方法、装置、非临时性计算机终端设备及可读存储介质。
技术介绍
随着移动互联网的快速发展，智能移动终端的使用越来越普及，用户经常会在自己的碎片时间段内通过智能移动终端浏览其他用户分享的页面，以获取所需内容。由于分享的页面中往往会包含大量的推荐图片，一次性加载需浪费许多网络请求，并且大部分图片都为jpg或png格式，图片尺寸较大，压缩率不高，会导致网页加载缓慢，从而影响用户体验。
技术实现思路
为克服相关技术中存在的问题，本专利技术提供一种网页加载显示方法、装置、非临时性计算机终端设备及可读存储介质。根据本专利技术实施例的第一方面，提供一种网页加载显示方法，包括如下步骤：向服务器获取待显示网页；解析显示所述网页，其中，将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示；响应于页面滚动事件，判断每个占位背景图与可视区域的相对位置关系，使可视区域内的占位背景图被替换为目标格式的所述原始图片予以显示。在其中一个实施例中，所述将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示的步骤包括:在解析页面过程中，先检测确定当前浏览器支持所述目标格式，然后将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示，否则，保留原始图片的原始格式进行显示。在其中一个实施例中，所述目标格式为webp格式，所述先检测确定当前浏览器支持所述目标格式的步骤包括：在网页中创建一个画布；插入webp格式图片并转换；判断所述webp格式图片能否转换成base64格式，若能，则确定当前浏览器支持所述webp格式，并返回表示当前浏览器支持webp格式图片的字符串。在其中一个实施例中，所述判断每个占位背景图与可视区域的相对位置关系的步骤包括：当占位背景图与页面顶部的距离大于所述页面已卷去的高度，且小于所述页面已卷去的高度与所述可视区域的高度的和，则确定所述占位背景图位于所述可视区域范围内。在其中一个实施例中，还包括步骤：将距离可视区域小于预设值的占位背景图预加载为目标格式的图片。在其中一个实施例中，所述响应于页面滚动事件步骤后，还包括：根据页面滚动速度，判断确定位于预加载范围内的占位背景图，将位于预加载范围内的占位背景图替换为目标格式的所述原始图片予以显示。在其中一个实施例中，还包括步骤：对已卷去且未加载成功的目标格式图片不再进行加载，直至所述未加载成功的目标格式图片再次落入可视区域。在其中一个实施例中，位于可视区域的目标格式图片尺寸根据可视区域的大小设定。根据本专利技术实施例的第二方面，提供一种网页加载显示装置，包括：获取模块，被配置为向服务器获取待显示网页；解析显示模块，被配置为解析显示所述网页，其中，将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示；响应模块，被配置为响应于页面滚动事件，判断每个占位背景图与可视区域的相对位置关系，使可视区域内的占位背景图被替换为目标格式的所述原始图片予以显示。在其中一个实施例中，所述装置还包括检测模块，用于在解析页面过程中，先检测确定当前浏览器支持所述目标格式，然后将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示，否则，保留原始图片的原始格式进行显示。在其中一个实施例中，所述目标格式为webp格式，所述装置还包括：创建模块，用于在网页中创建一个画布；插入模块，用于插入webp格式图片并转换；判断模块，用于判断所述webp格式图片能否转换成base64格式，若能，则确定当前浏览器支持所述目标格式，并返回表示当前浏览器支持webp格式图片的字符串。在其中一个实施例中，当占位背景图与页面顶部的距离大于所述页面已滚去的高度，且小于所述页面已滚去的高度与所述可视区域的高度的和，则确定所述占位背景图位于所述可视区域范围内。在其中一个实施例中，所述装置还包括：预加载模块，用于将距离可视区域小于预设值的占位背景图预加载为目标格式的图片。在其中一个实施例中，所述响应模块还用于：根据页面滚动速度，判断确定占位背景图预加载范围，将位于预加载范围内的占位背景图替换为目标格式的所述原始图片予以显示。在其中一个实施例中，所述装置还包括：重加载模块，用于对已卷去且未加载成功的目标格式图片不再进行加载，直至所述未加载成功的目标格式图片再次落入可视区域。在其中一个实施例中，位于可视区域的目标格式图片尺寸根据可视区域的大小设定。根据本专利技术实施例的第三方面，提供一种终端设备，包括：显示器；处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：执行上述任一项技术方案所述的网页加载显示方法的步骤。根据本专利技术实施例的第四方面，提供一种非临时性计算机可读存储介质，当所述存储介质中的指令由移动终端的处理器执行时，使得移动终端能够执行一种网页加载显示方法，所述方法包括上述任一项技术方案所述的网页加载显示方法的步骤。根据本专利技术实施例的第五方面，提供一种应用程序/计算机程序产品，当所述存储介质中的指令由终端设备的处理器执行时，使得终端设备能够执行一种网页加载显示方法，所述方法包括上述任一项技术方案所述的网页加载显示方法的步骤。本专利技术的实施例提供的技术方案可以包括以下有益效果：将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示，并将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，直至该占位背景图落入或即将落入显示区域内，才被替换为目标格式的所述原始图片予以显示，由此可以避免一次性加载浪费过多的网络请求，并将压缩率不高、尺寸较大的图片转换成高压缩率、小尺寸的目标格式图片，从而加快页面加载速度，提升用户体验。应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本专利技术。附图说明此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本专利技术的实施例，并与说明书一起用于解释本专利技术的原理。图1是根据一示例性实施例示出的一种网页加载显示方法的流程图。图2是根据一示例性实施例示出的一种网页加载显示方法的效果图。图3是根据一示例性实施例示出的一种网页加载显示装置的框图。图4是根据一示例性实施例示出的一种终端设备的框图。具体实施方式这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本专利技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本专利技术的一些方面相一致的装置和方法的例子。图1是根据一示例性实施例示出的一种网页加载显示方法的流程图，如图1所示，所述网页加载显示方法用于终端设备中，包括以下步骤:在步骤S11中，向服务器获取待显示网页。在步骤S12中，解析显示所述网页，其中，将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示。所述占位背景图可以为不包含具体内容的图片，可根据待加载图片的内容以不同的形式进行展示，如背景颜色、饱和度上的不同，以避免相同本文档来自技高网...

【技术保护点】
1.一种网页加载显示方法，其特征在于，包括如下步骤：向服务器获取待显示网页；解析显示所述网页，其中，将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示；响应于页面滚动事件，判断每个占位背景图与可视区域的相对位置关系，使可视区域内的占位背景图被替换为目标格式的所述原始图片予以显示。

【技术特征摘要】
1.一种网页加载显示方法，其特征在于，包括如下步骤：向服务器获取待显示网页；解析显示所述网页，其中，将网页上位于当前浏览器非可视区域中的原始图片预置为占位背景图，将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示；响应于页面滚动事件，判断每个占位背景图与可视区域的相对位置关系，使可视区域内的占位背景图被替换为目标格式的所述原始图片予以显示。2.根据权利要求1所述的网页加载显示方法，其特征在于，所述将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示的步骤包括:在解析页面过程中，先检测确定当前浏览器支持所述目标格式，然后将网页上位于可视区域中的原始图片预置为目标格式的图片予以显示，否则，保留原始图片的原始格式进行显示。3.根据权利要求2所述的网页加载显示方法，其特征在于，所述目标格式为webp格式，所述先检测确定当前浏览器支持所述目标格式的步骤包括：在网页中创建一个画布；插入webp格式图片并转换；判断所述webp格式图片能否转换成base64格式，若能，则确定当前浏览器支持所述webp格式，并返回表示当前浏览器支持webp格式图片的字符串。4.根据权利要求1所述的网页加载显示方法，其特征在于，所述判断每个占位背景图与可视区域的相对位置关系的步骤包括：当占位背景图与页面顶部的距离大于所述页面已卷去的高度，且小于所述页面已卷去的高度与所述可视区域的高度的和，则确定所述占位背景图位于所述可视区域范围内。5.根据权利要求1...

【专利技术属性】
技术研发人员：张剑波，
申请(专利权)人：北京达佳互联信息技术有限公司，
类型：发明
国别省市：北京,11