一种加载图片元素的方法及装置与流程

专利2022-06-30  48


本发明涉及字符串加载领域,尤其涉及一种加载图片元素的方法及装置。



背景技术:

图片的加载方式有多种,可以采用一次性加载的方式,将所有图片一次性加载完成。然而如果页面包含数以百计的图片,当用户访问这些页面时,等待的时间特别长。

目前在对页面加载时,需要从后台服务器获取超文本标记语言(hypertextmarkuplanguage,简称html)数据,然后通过获取的数据进行页面加载。

然而在一些情况下,例如通过抓取的方式抓取某些页面上的数据,这些抓取的数据将以字符串的形式存在。当对字符串形式的数据进行页面加载时,只能采用一次性加载的方式,将所有的图片资源一次性全部加载完成,增加服务器端的资源消耗。



技术实现要素:

鉴于上述问题,提出了本发明实施例以便提供一种克服上述问题或者至少部分地解决上述问题的加载图片元素的方法及装置。

第一方面,本发明实施例提供了一种加载图片元素的方法,应用于电子终端,所述方法包括:

获取目标字符串;其中,所述目标字符串包含有目标页面中的多个页面元素;所述页面元素的类型包括图片元素类型以及非图片元素类型;

在所述目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,所述第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

将所述第一中间字符串转换为数组类型的对象数组,其中所述对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

在加载所述对象数组的情况下,同时加载所述对象数组中的第一目标显示对象以及第二目标显示对象;其中,所述第一目标显示对象为所述对象数组中属于非图片元素类型的页面元素对应的显示对象;所述第二目标显示对象为出现在用户可视区域的所述对象数组中属于图片元素类型的页面元素对应的显示对象。

可选的,在所述目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串的步骤包括:

在所述目标字符串中,对属于图片元素类型的页面元素添加预设类型标签,并对所述预设类型标签添加预设标识属性,得到第二中间字符串;其中,所述第二中间字符串包含有非图片元素类型的页面元素以及添加有预设类型标签的页面元素;

在所述第二中间字符串中,将具有所述预设标识属性的所述预设类型标签替换为懒加载标签,得到第一中间字符串。

可选的,在所述目标字符串中,对属于图片元素类型的页面元素添加预设类型标签的步骤包括:

根据不同标签的标识对所述目标字符串进行正则匹配,确定所述目标字符串中的所有图片标签;

在每一个图片标签前紧邻所述图片标签的位置插入预设类型标签的开始标签,在每一个图片标签后紧邻所述图片标签的位置插入预设类型标签的结束标签。

可选的,所述预设类型标签为预设浏览器可识别的标签中的一种。

可选的,在所述将具有所述预设标识属性的所述预设类型标签替换为懒加载标签的步骤之前,所述方法还包括:

将所述第二中间字符串中,所述预设浏览器不可识别的标签替换为所述预设浏览器可识别的标签。

第二方面,本发明实施例还提供一种加载图片元素的装置,应用于电子终端,所述装置包括:

获取模块,用于获取目标字符串;其中,所述目标字符串包含有目标页面中的多个页面元素;所述页面元素的类型包括图片元素类型以及非图片元素类型;

添加模块,用于在所述目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,所述第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

转换模块,用于将所述第一中间字符串转换为数组类型的对象数组,其中所述对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

加载模块,用于在加载所述对象数组的情况下,同时加载所述对象数组中的第一目标显示对象以及第二目标显示对象;其中,所述第一目标显示对象为所述对象数组中属于非图片元素类型的页面元素对应的显示对象;所述第二目标显示对象为出现在用户可视区域的所述对象数组中属于图片元素类型的页面元素对应的显示对象。

可选的,所述添加模块包括:

添加单元,用于在所述目标字符串中,对属于图片元素类型的页面元素添加预设类型标签,并对所述预设类型标签添加预设标识属性,得到第二中间字符串;其中,所述第二中间字符串包含有非图片元素类型的页面元素以及添加有预设类型标签的页面元素;

替换单元,用于在所述第二中间字符串中,将具有所述预设标识属性的所述预设类型标签替换为懒加载标签,得到第一中间字符串。

可选的,所述添加单元,具体用于根据不同标签的标识对所述目标字符串进行正则匹配,确定所述目标字符串中的所有图片标签;在每一个图片标签前紧邻所述图片标签的位置插入预设类型标签的开始标签,在每一个图片标签后紧邻所述图片标签的位置插入预设类型标签的结束标签。

可选的,所述预设类型标签为预设浏览器可识别的标签中的一种。

可选的,所述装置还包括:

处理模块,用于将所述第二中间字符串中,所述预设浏览器不可识别的标签替换为所述预设浏览器可识别的标签。

第三方面,本发明实施例还提供一种电子设备,该电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如上所述的加载图片元素的方法中的步骤。

第四方面,本发明实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如上所述的加载图片元素的方法中的步骤。

在本发明实施例中,可以直接获取目标字符串;其中,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型;在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;其中,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象;在对对象数组进行加载时,无需加载未出现在用户可视区域的属于图片元素类型的页面元素对应的显示对象。从而减少了不必要的资源消耗,提高了页面性能。

附图说明

为了更清楚地说明本发明实施例的技术方案,下面将对本发明实施例的描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的加载图片元素的方法的步骤流程图;

图2为本发明实施例提供的加载图片元素的装置的结构框图;

图3为本发明实施例提供的电子设备的结构框图。

具体实施方式

下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。

应理解,说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本发明的至少一个实施例中。因此,在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外,这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。

在本发明的各种实施例中,应理解,下述各过程的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本发明实施例的实施过程构成任何限定。

参见图1,本发明实施例提供了一种加载图片元素的方法,应用于电子终端,该方法包括:

步骤101,获取目标字符串。

应当说明的是,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型。目标页面为预先确定的网络页面。可以通过抓取的方式从确定的网络页面直接抓取数据,并且抓取的数据为目标页面中多个页面元素组成的字符串类型的数据。其中页面元素包括:标签以及元素内容。每个页面元素对应一个或者一对标签以及对应一元素内容,例如页面元素可以表示为“<spanstyle="font-size:18px;color:rgb(0,122,170);">10月12日,垮塌桥梁设计方中设股份在深交所互动平台回复用户提问,表示其作为设计单位,在第一时间赶往事发地点,并进行了桥梁复算。</span>”,该页面元素对应的标签为span标签,对应的元素内容为“10月12日,垮塌桥梁设计方中设股份在深交所互动平台回复用户提问,表示其作为设计单位,在第一时间赶往事发地点,并进行了桥梁复算。”。

图片元素类型的页面元素由图片标签和图片地址构成。图片标签即为img标签。例如图片元素类型的页面元素可以表示为“<imgclass="rich_pages"src="//pic1.58cdn.com.cn/58toutiao/big/n_v28b.jpg">”,其中图片标签即img标签,图片地址为“//pic1.58cdn.com.cn/58toutiao/big/n_v28b.jpg”,该图片地址也可被称为图片路径,通过该图片地址可以获取相应的图片。

步骤102,在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串。

应当说明的是,添加懒加载标签针对于目标字符串,对目标字符串中的属于图片元素类型的页面元素添加懒加载标签,对目标字符串中的剩余页面元素不进行处理。从而生成的第一中间字符串中包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素。

步骤103,将第一中间字符串转换为数组类型的对象数组。

应当说明的是,对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素。可以基于react实现数据格式的转换,并将第一中间字符串转换为reactelements。

步骤104,在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象。

应当说明的是,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象。

用户可视区域为电子终端的窗口范围。该电子终端具有显示屏,并且可以连接互联网。例如电子终端可以为电脑、手机等电子设备。在对对象数组进行加载时,对未出现在用户可视区域的属于图片元素类型的页面元素对应的显示对象不进行加载。

本发明实施例中,可以直接获取目标字符串;其中,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型;在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;其中,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象;在对对象数组进行加载时,无需加载未出现在用户可视区域的属于图片元素类型的页面元素对应的显示对象。从而减少了不必要的资源消耗,提高了页面性能。

在上述发明实施例的基础上,本发明实施例中,在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串的步骤包括:

在目标字符串中,对属于图片元素类型的页面元素添加预设类型标签,并对预设类型标签添加预设标识属性,得到第二中间字符串;其中,第二中间字符串包含有非图片元素类型的页面元素以及添加有预设类型标签的页面元素;

在第二中间字符串中,将具有预设标识属性的预设类型标签替换为懒加载标签,得到第一中间字符串。

应当说明的是,预设类型标签为预设浏览器可识别的标签中的一种,例如可以为div标签,但不限于此。可以根据目前主流浏览器均识别的标签,确定预设类型标签。较佳的,当属于图片元素类型的页面元素的数量为多个时,将每个属于图片元素类型的页面元素的外面包裹一层同一种类型的标签。以上述图片元素类型的页面元素为例,包裹一层div标签,并添加标识属性之后图片元素类型的页面元素变为“<divdata-lazy="img-lazy"><imgclass="rich_pages"src="//pic1.58cdn.com.cn/58toutiao/big/n_v28b.jpg"></div>”,其中标识属性为“data-lazy="img-lazy"”。值得注意的是,在添加标识属性时,并不针对目标字符串原有预设类型标签添加标识属性。

较佳的,可以基于react实现标签的替换以及数据格式的转换。通过html-react-parser中的parser方法、domtoreact方法以及replace方法,可以实现将具有标识属性的预设类型标签替换为react中的懒加载标签,并将第一中间字符串转换为reactelements。

在上述发明实施例的基础上,本发明实施例中,在目标字符串中,对属于图片元素类型的页面元素添加预设类型标签的步骤包括:

根据不同标签的标识对目标字符串进行正则匹配,确定目标字符串中的所有图片标签;

在每一个图片标签前紧邻图片标签的位置插入预设类型标签的开始标签,在每一个图片标签后紧邻图片标签的位置插入预设类型标签的结束标签。

应当说明的是,由于目标字符串中的页面元素由标签以及元素内容构成,并且不同标签具有不同标识,例如div标签和span标签,其名称(也可称为标识)不同,因此通过正则匹配很容易就可以确定不同的标签,进而可以确定所有的图片标签,即img标签。当目标字符串中图片标签的数量为多个时,需要对每个图片元素类型的页面元素进行包裹。

例如当目标字符串为“<section><spanstyle="font-size:18px;color:rgb(0,122,170);">10月12日,无锡垮塌桥梁设计方中设股份在深交所互动平台回复用户提问,表示其作为设计单位,在第一时间赶往事发地点,并进行了桥梁复算。经过多人多软件连夜认真复算,确认设计符合各项规范要求。</span></section><p><imgclass="rich_pages"src="//pic1.58cdn.com.cn/nowater/58toutiao/big/n_v283548c53552c44eba1de7272e9b4821b.jpg"></p><p><spanstyle="font-size:18px;"><strong>回应全文如下:</strong></span><spanstyle="font-size:18px;"></span></p><p><spanstyle="font-size:18px;"><strong>问:</strong>董秘你好,请问无锡侧翻高架桥的设计单位是你们吗?苏交科和中设设计都发了澄清公告,你们怎么还没发呢?会发吗?期待您的回复。</span></p>”时,包裹一层预设类型标签,并添加标识属性之后,目标字符串可以变为包裹后的字符串。

进行包裹并添加预设标识属性后,字符串为“<section><spanstyle="font-size:0.4800rem;color:rgb(0,122,170);">10月12日,无锡垮塌桥梁设计方中设股份在深交所互动平台回复用户提问,表示其作为设计单位,在第一时间赶往事发地点,并进行了桥梁复算。经过多人多软件连夜认真复算,确认设计符合各项规范要求。</span></section><p><divdata-lazy="img-lazy"><imgclass="rich_pages"src="https://pic2.58cdn.com.cn/nowater/58toutiao/big/n_v283548c53552c44eba1de7272e9b4821b.jpg?w=500"></div></p><p><spanstyle="font-size:0.4800rem;"><strong>回应全文如下:</strong></span><spanstyle="font-size:0.4800rem;"></span></p><p><spanstyle="font-size:0.4800rem;"><strong>问:</strong>董秘你好,请问无锡侧翻高架桥的设计单位是你们吗?苏交科和中设设计都发了澄清公告,你们怎么还没发呢?会发吗?期待您的回复。</span></p>”。

为了避免目标字符串中携带浏览器无法识别的标签时,无法对该无法识别的标签进行加载,在上述各发明实施例的基础上,本发明实施例中,在将具有预设标识属性的预设类型标签替换为懒加载标签的步骤之前,该方法还包括:

将第二中间字符串中,预设浏览器不可识别的标签替换为预设浏览器可识别的标签。

应当说明的是,可以将预设浏览器不可识别的所有标签替换为同一种预设浏览器可识别的标签,例如均替换为span标签,但不限于此。

以上介绍了本发明实施例提供的加载图片元素的方法,下面将结合附图介绍本发明实施例提供的加载图片元素的装置。

参见图2,本发明实施例还提供了一种加载图片元素的装置,应用于电子终端,该装置包括:

获取模块21,用于获取目标字符串;其中,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型;

添加模块22,用于在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

转换模块23,用于将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

加载模块24,用于在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;其中,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象。

可选的,添加模块22包括:

添加单元,用于在目标字符串中,对属于图片元素类型的页面元素添加预设类型标签,并对预设类型标签添加预设标识属性,得到第二中间字符串;其中,第二中间字符串包含有非图片元素类型的页面元素以及添加有预设类型标签的页面元素;

替换单元,用于在第二中间字符串中,将具有预设标识属性的预设类型标签替换为懒加载标签,得到第一中间字符串。

可选的,添加单元,具体用于根据不同标签的标识对目标字符串进行正则匹配,确定目标字符串中的所有图片标签;在每一个图片标签前紧邻图片标签的位置插入预设类型标签的开始标签,在每一个图片标签后紧邻图片标签的位置插入预设类型标签的结束标签。

可选的,预设类型标签为预设浏览器可识别的标签中的一种。

可选的,该装置还包括:处理模块,用于将第二中间字符串中,预设浏览器不可识别的标签替换为预设浏览器可识别的标签。

本发明实施例提供的加载图片元素的装置能够实现图1的方法实施例中加载图片元素的方法实现的各个过程,为避免重复,这里不再赘述。

本发明的实施例中,可以直接获取目标字符串;其中,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型;在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;其中,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象;在对对象数组进行加载时,无需加载未出现在用户可视区域的属于图片元素类型的页面元素对应的显示对象。从而减少了不必要的资源消耗,提高了页面性能。

另一方面,本发明实施例还提供了一种电子设备,包括存储器、处理器、总线以及存储在存储器上并可在处理器上运行的计算机程序,处理器执行程序时实现上述加载图片元素的方法中的步骤。

举个例子如下,图3示出了一种电子设备的实体结构示意图。

如图3所示,该电子设备可以包括:处理器(processor)310、通信接口(communicationsinterface)320、存储器(memory)330和通信总线340,其中,处理器310,通信接口320,存储器330通过通信总线340完成相互间的通信。处理器310可以调用存储器330中的逻辑指令,以执行如下方法:

获取目标字符串;其中,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型;

在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;其中,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象。

此外,上述的存储器330中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括:u盘、移动硬盘、只读存储器(rom,read-onlymemory)、随机存取存储器(ram,randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。

再一方面,本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现以执行上述各实施例提供的加载图片元素的方法,例如包括:

获取目标字符串;其中,目标字符串包含有目标页面中的多个页面元素;页面元素的类型包括图片元素类型以及非图片元素类型;

在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;其中,第一目标显示对象为对象数组中属于非图片元素类型的页面元素对应的显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象。

以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。

通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如rom/ram、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是:以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。


技术特征:

1.一种加载图片元素的方法,应用于电子终端,其特征在于,所述方法包括:

获取目标字符串;其中,所述目标字符串包含有目标页面中的多个页面元素;所述页面元素的类型包括图片元素类型以及非图片元素类型;

在所述目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,所述第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

将所述第一中间字符串转换为数组类型的对象数组,其中所述对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

在加载所述对象数组的情况下,同时加载所述对象数组中的第一目标显示对象以及第二目标显示对象;其中,所述第一目标显示对象为所述对象数组中属于非图片元素类型的页面元素对应的显示对象;所述第二目标显示对象为出现在用户可视区域的所述对象数组中属于图片元素类型的页面元素对应的显示对象。

2.根据权利要求1所述的方法,其特征在于,在所述目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串的步骤包括:

在所述目标字符串中,对属于图片元素类型的页面元素添加预设类型标签,并对所述预设类型标签添加预设标识属性,得到第二中间字符串;其中,所述第二中间字符串包含有非图片元素类型的页面元素以及添加有预设类型标签的页面元素;

在所述第二中间字符串中,将具有所述预设标识属性的所述预设类型标签替换为懒加载标签,得到第一中间字符串。

3.根据权利要求2所述的方法,其特征在于,在所述目标字符串中,对属于图片元素类型的页面元素添加预设类型标签的步骤包括:

根据不同标签的标识对所述目标字符串进行正则匹配,确定所述目标字符串中的所有图片标签;

在每一个图片标签前紧邻所述图片标签的位置插入预设类型标签的开始标签,在每一个图片标签后紧邻所述图片标签的位置插入预设类型标签的结束标签。

4.根据权利要求2所述的方法,其特征在于,所述预设类型标签为预设浏览器可识别的标签中的一种。

5.根据权利要求4所述的方法,其特征在于,在所述将具有所述预设标识属性的所述预设类型标签替换为懒加载标签的步骤之前,所述方法还包括:

将所述第二中间字符串中,所述预设浏览器不可识别的标签替换为所述预设浏览器可识别的标签。

6.一种加载图片元素的装置,应用于电子终端,其特征在于,所述装置包括:

获取模块,用于获取目标字符串;其中,所述目标字符串包含有目标页面中的多个页面元素;所述页面元素的类型包括图片元素类型以及非图片元素类型;

添加模块,用于在所述目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;其中,所述第一中间字符串包含有非图片元素类型的页面元素以及添加有懒加载标签的页面元素;

转换模块,用于将所述第一中间字符串转换为数组类型的对象数组,其中所述对象数组中包括多个显示对象,并且每个显示对象对应一个页面元素;

加载模块,用于在加载所述对象数组的情况下,同时加载所述对象数组中的第一目标显示对象以及第二目标显示对象;其中,所述第一目标显示对象为所述对象数组中属于非图片元素类型的页面元素对应的显示对象;所述第二目标显示对象为出现在用户可视区域的所述对象数组中属于图片元素类型的页面元素对应的显示对象。

7.根据权利要求6所述的装置,其特征在于,所述添加模块包括:

添加单元,用于在所述目标字符串中,对属于图片元素类型的页面元素添加预设类型标签,并对所述预设类型标签添加预设标识属性,得到第二中间字符串;其中,所述第二中间字符串包含有非图片元素类型的页面元素以及添加有预设类型标签的页面元素;

替换单元,用于在所述第二中间字符串中,将具有所述预设标识属性的所述预设类型标签替换为懒加载标签,得到第一中间字符串。

8.根据权利要求7所述的装置,其特征在于,所述添加单元,具体用于根据不同标签的标识对所述目标字符串进行正则匹配,确定所述目标字符串中的所有图片标签;在每一个图片标签前紧邻所述图片标签的位置插入预设类型标签的开始标签,在每一个图片标签后紧邻所述图片标签的位置插入预设类型标签的结束标签。

9.一种电子设备,包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序,其特征在于,所述计算机程序被所述处理器执行时实现如权利要求1至5中任一项所述的加载图片元素的方法的步骤。

10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的加载图片元素的方法的步骤。

技术总结
本发明实施例提供了一种加载图片元素的方法及装置,该加载图片元素的方法应用于电子终端,包括:获取目标字符串;目标字符串包含有目标页面中的多个页面元素;在目标字符串中,对属于图片元素类型的页面元素添加懒加载标签,得到第一中间字符串;将第一中间字符串转换为数组类型的对象数组,其中对象数组中包括多个显示对象;在加载对象数组的情况下,同时加载对象数组中的第一目标显示对象以及第二目标显示对象;第二目标显示对象为出现在用户可视区域的对象数组中属于图片元素类型的页面元素对应的显示对象。本发明直接获取字符串,无需加载未出现在用户可视区域的图片元素对应的显示对象。从而减少了不必要的资源消耗,提高了页面性能。

技术研发人员:李玲
受保护的技术使用者:五八有限公司
技术研发日:2019.12.31
技术公布日:2020.06.05

转载请注明原文地址: https://bbs.8miu.com/read-56642.html

最新回复(0)