CN109298905A

CN109298905A - 利用前端编程语言优化图片懒加载的方法以及电子设备

Info

Publication number: CN109298905A
Application number: CN201810931082.XA
Authority: CN
Inventors: 孙悦; 李天驰; 李涛
Original assignee: Shenzhen Dianmao Technology Co Ltd
Current assignee: Shenzhen Dianmao Technology Co Ltd
Priority date: 2018-08-15
Filing date: 2018-08-15
Publication date: 2019-02-01
Also published as: WO2020034951A1

Abstract

本发明公开一种利用前端编程语言优化图片懒加载的方法以及电子设备，方法包括：当网页通过图片懒加载的方式加载缓存图片时，判断所述缓存图片的当前节点是否渲染完成；当所述缓存图片的当前节点渲染完成时，将预先定义的缓存图片显示于网页中；获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及目标节点是否完成渲染；当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，则获取目标图片的目标地址，并根据所述目标地址加载目标图片，并通过目标图片替换所述缓存图片，以及显示所述目标图片。这样，便不需要监听用户对网页的操作，提高了图片懒加载的性能，从而提高了网页图片加载的效率、节约了时间。

Description

利用前端编程语言优化图片懒加载的方法以及电子设备

技术领域

本发明涉及前端编程语言领域，尤其涉及利用前端编程语言优化图片懒加载的方法以及电子设备。

背景技术

网页一般包含文字和图片，当用户向后台服务器发送加载网页的请求后，网页将接收后台服务器发送的文字和图片。如果网页的图片同时加载，存在用户查看网页其中一个位置，对应位置的图片却未加载的问题，此时，用户只能查看其它已显示图片的网页位置。

图片懒加载是一种图片的加载方式。具体的，如果网页包含数以百计的图片，当用户访问这些页面(网页)时，等待的时间特别长，也就是说，在接收到用户的浏览请求后，同时加载所有的图片，导致图片加载的时间过长。而使用图片懒加载，便可以较好的解决这个问题。在用户请求加载网页后，先加载几页的图片，并显示，然后监听用户对网页的操作，再加载后续的图片。这样，如果用户仅仅浏览网页的一部分，那么后续的图片便不需要加载，从而减轻了服务器(后台服务器)的压力。

图片懒加载虽然能够有效降低服务器的压力，然而，使用图片懒加载必须监听用户对网页的操作，不间断的查询或计算用户当前访问的位置，如果查询或计算的过程中出现异常，那么所有图片的加载顺序都将异常。

也就是说，现有图片懒加载的方式加载网页图片的性能较差。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供利用前端编程语言优化图片懒加载的方法以及电子设备，旨在解决现有图片懒加载的方式加载网页图片的性能较差的问题。

本发明的技术方案如下：

一种利用前端编程语言优化图片懒加载的方法，其包括：

A、当网页通过图片懒加载的方式加载缓存图片时，判断所述缓存图片的当前节点是否渲染完成；

B、当所述缓存图片的当前节点渲染完成时，将预先定义的缓存图片显示于网页中；

C、获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及目标节点是否完成渲染；

D、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，则获取目标图片的目标地址，并根据所述目标地址加载目标图片，并通过目标图片替换所述缓存图片，以及显示所述目标图片。

优选的，所述图片属性信息包括参考节点、参照区域、相交区域和相交比例的一种的或几种。

优选的，所述步骤C中，判断目标节点是否满足预设的图片属性信息具体包括：

监听目标节点的位置是否发生变化；

当发生变化时，判断目标节点的位置变化是否满足所述图片属性信息。

优选的，所述步骤C中，判断目标节点是否完成渲染具体包括：

将监听事件推入栈内存；

等待监听事件是否接收到通知。

优选的，所述步骤D具体包括：

D1、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，向所述栈内存发送获取目标地址的指令；

D2、读取所述栈内存中的目标地址，并根据目标地址加载目标图片；

D3、通过目标图片替换所述缓存图片，以及显示所述目标图片。

优选的，所述步骤D3后包括：

E、结束对目标节点的监听，并释放栈内存存储的目标地址。

本发明还提供一种电子设备，其包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

当网页通过图片懒加载的方式加载缓存图片时，判断所述缓存图片的当前节点是否渲染完成；

当所述缓存图片的当前节点渲染完成时，将预先定义的缓存图片显示于网页中；

获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及目标节点是否完成渲染；

当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，则获取目标图片的目标地址，并根据所述目标地址加载目标图片，并通过目标图片替换所述缓存图片，以及显示所述目标图片。

本发明还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行上述所述的利用前端编程语言优化图片懒加载的方法。

本发明还一种非易失性计算机可读存储介质，其所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的利用前端编程语言优化图片懒加载的方法。

有益效果：通过本发明提供的方法，当用户使用图片懒加载的方式加载缓存图片时，先判断缓存图片的当前节点是否渲染完成，如果完成渲染，则在当前网页中显示缓存图片；然后，获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及判断目标节点是否完成渲染，如果目标节点已渲染并且目标节点满足预设的图片属性信息，那么获取目标图片的目标地址，并根据目标地址加载目标图片，并显示目标图片。这样，便不需要监听用户对网页的操作，提高了图片懒加载的性能，从而提高了网页图片加载的效率、节约了时间。

附图说明

图1为本发明利用前端编程语言优化图片懒加载的方法较佳实施例的流程图。

图2为本发明一种电子设备较佳实施例的结构框图。

具体实施方式

本发明提供利用前端编程语言优化图片懒加载的方法以及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，一种利用前端编程语言优化图片懒加载的方法，其包括：

S1、当网页通过图片懒加载的方式加载缓存图片时，判断所述缓存图片的当前节点是否渲染完成；

S2、当所述缓存图片的当前节点渲染完成时，将预先定义的缓存图片显示于网页中；

S3、获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及目标节点是否完成渲染；

S4、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，则获取目标图片的目标地址，并根据所述目标地址加载目标图片，并通过目标图片替换所述缓存图片，以及显示所述目标图片。

通过本发明提供的方法，以判断目标节点是否满足预设的图片属性信息，以及判断目标节点是否渲染的方式代替原有图片懒加载中的滚动事件监听方式。这样，只有当目标节点满足预设的图片属性信息以及目标节点被渲染时，才获取目标地址并加载目标图片。如果目标地址不满足预设的图片属性信息或目标节点未被渲染，则不加载目标图片。也就是说，如果目标地址不满足预设的图片属性信息或目标节点未被渲染，后台服务器不需要做加载处理，不需要重复计算。大大提高了效率；并且，只有目标节点出现异常时，图片懒加载才会出现异常，而当目标节点出现异常时，通过拦截相应错误报告，并重新定义目标节点，便可恢复正常的图片懒加载。这样，当通过电子设备在浏览网页时，电子设备的性能更佳，浏览网页时的帧数也稳定在一个范围内。

所述步骤S1中，关于图片懒加载已在背景技术中详细介绍。故此不做赘述。

所述缓存图片是指网页当前加载的图片，也就是说，网页当前显示的图片。

所述缓存图片的当前节点是指缓存图片对应前端编程语言html包含的img标签。也就是说，判断前端编程语言html包含的img标签是否全部执行完成。如果执行完成，则执行步骤S2，若否，则继续判断前端编程语言html包含的img标签是否全部执行完成。

所述步骤S2中，如果步骤S1中的判断结果为：当所述缓存图片的当前节点渲染完成，也就是说，所述缓存图片对应的img标签全部执行完成，则将所述缓存图片显示于网页中。其中，所述缓存图片是用户预先定义的任意图片。也就是说，用户可将任意一张图片作为本发明中的缓存图片。不仅如此，用户还可以将绘制的图片作为缓存图片。例如，将绘制有文字或字母的图片作为缓存图片。使得缓存图片具有个性化的特点。

所述步骤S3中，获取目标图片的目标节点，也就是说，先获取目标图片对应的前端编程语言html包含的img标签，然后判断目标节点是否满足预设的图片属性信息，以及判断目标节点是否渲染完成。

其中，所述参考节点是指用户预先定义的节点，也就是说，当目标节点执行至用户定义的参考节点时，可以判定目标节点满足预设的图片属性信息。

其中，所述参照区域是指用户预先定义的节点参考区域，也就是说，当目标节点执行至用户定义的参考区域时，可以判定目标节点满足预设的图片属性信息。

其中，所述相交区域是指用户预先定义的参考节点阈值，也就是说，当目标节点执行至用户定义的相交区域时，可以判定目标节点满足预设的图片属性信息。

其中，所述相交比例语所述相交区域类似，故此不做赘述。

只有当目标节点满足预设的图片属性信息时，才执行步骤S4。

需要说明的是，所述目标节点只需要满足所述图片属性信息中的一个或几个，便可以判定目标节点满足图片属性信息。而不是说，目标节点必须满足所述的图片属性信息。

不仅如此，目标节点还必须渲染完成，才执行步骤S4。目标节点的渲染与初始节点的渲染相同或相似，故此不做赘述。

优选的，所述步骤S3中，判断目标节点是否满足预设的图片属性信息具体包括：

监听目标节点的位置是否发生变化；

所述监听目标节点的位置变化是指判断目标节点是否发生位置或其它物理变化。。

例如，先通过设定目标节点的行数，具体是指，获取目标节点在所有代码中属于(处于)第几行；当执行所有代码时，判断目标节点的行数是否发生改变，从而判断目标节点的位置是否发生改变。

如果发生变化，则将变化的信息与预设的图片属性信息进行对比，判断是否满足预设的图片属性信息。

例如，预设的图片属性信息中的参考区域为3行，也就是说，当目标节点的行数变化3行，才表示目标节点满足预设的图片属性信息；否则，不满足预设的图片属性信息。

优选的，所述步骤S3中，判断目标节点是否完成渲染具体包括：

将监听事件推入栈内存；

等待监听事件是否接收到通知。

当目标节点已经渲染完成后，则将相应的监听事件推入内存中，也就是说，将监听事件保存至电子设备的存储器中。

然后，等待用户获取监听事件的通知。如果获取到通知，则执行步骤S4，若否，则继续保存在存储器中，不做变化。

所述步骤S4中，浏览器向内存发送获取目标地址的通知，内存根据所述通知将目标地址返回至浏览器，浏览器再根据内存返回的目标地址加载图片，得到目标图片。然后，将目标图片替换网页中缓存的缓存图片，并显示目标图片。

这样，便可以在接收到用户通知后，获取目标图片，并将目标图片显示。从而大大提高了效率，节约了时间。

优选的，所述步骤S4包括：

S41、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，向所述栈内存发送获取目标地址的指令；

S42、读取所述栈内存中的目标地址，并根据目标地址加载目标图片；

S43、通过目标图片替换所述缓存图片，以及显示所述目标图片。

所述步骤S41中，所述栈内存具体是指电子设备的内存。通过向内存发送获取目标地址的指令，从而控制内存执行相应的指令或动作。

所述步骤S42中，浏览器读取栈内存的目标地址，然后根据目标地址加载目标图片。

所述步骤S43中，将加载得到的目标图片替换原来网页中的缓存图片，并且，在网页中显示目标图片。

优选的，所述步骤S43后包括：

S5、结束对目标节点的监听，并释放栈内存存储的目标地址。

所述步骤S5中，如果当前目标节点对应的目标图片已经加载完成，则结束对目标节点的监听，已经在栈内存存储的目标地址删除或释放。

请参阅图2，本发明还提供一种电子设备10，其包括：

处理器110，适于实现各指令，以及

存储设备120，适于存储多条指令，所述指令适于由处理器加载并执行：

所述处理器110可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISC Machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、任何其它这种配置。

存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的利用前端编程语言优化图片懒加载的方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行基于利用前端编程语言优化图片懒加载的各种功能应用以及数据处理，即实现上述方法实施例中的利用前端编程语言优化图片懒加载的方法。

关于上述电子设备10的具体技术细节，已在上述步骤中详述，故此不做赘述。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims

1.一种利用前端编程语言优化图片懒加载的方法，其特征在于，包括：

2.根据权利要求1所述利用前端编程语言优化图片懒加载的方法，其特征在于，所述图片属性信息包括参考节点、参照区域、相交区域和相交比例的一种的或几种。

3.根据权利要求1所述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤C中，判断目标节点是否满足预设的图片属性信息具体包括：

监听目标节点的位置是否发生变化；

4.根据权利要求1所述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤C中，判断目标节点是否完成渲染具体包括：

将监听事件推入栈内存；

等待监听事件是否接收到通知。

5.根据权利要求4述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤D具体包括：

6.根据权利要求5述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤D3后包括：

E、结束对目标节点的监听，并释放栈内存存储的目标地址。

7.一种电子设备，其特征在于，包括：

处理器，适于实现各指令，以及

8.根据权利要求7所述电子设备，其特征在于，所述图片属性信息包括参考节点、参照区域、相交区域和相交比例的一种的或几种。

9.一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行权利要求1-6任一项所述的利用前端编程语言优化图片懒加载的方法。

10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-6任一项所述的利用前端编程语言优化图片懒加载的方法。