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

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

【技术实现步骤摘要】
利用前端编程语言优化图片懒加载的方法以及电子设备
本专利技术涉及前端编程语言领域，尤其涉及利用前端编程语言优化图片懒加载的方法以及电子设备。
技术介绍
网页一般包含文字和图片，当用户向后台服务器发送加载网页的请求后，网页将接收后台服务器发送的文字和图片。如果网页的图片同时加载，存在用户查看网页其中一个位置，对应位置的图片却未加载的问题，此时，用户只能查看其它已显示图片的网页位置。图片懒加载是一种图片的加载方式。具体的，如果网页包含数以百计的图片，当用户访问这些页面(网页)时，等待的时间特别长，也就是说，在接收到用户的浏览请求后，同时加载所有的图片，导致图片加载的时间过长。而使用图片懒加载，便可以较好的解决这个问题。在用户请求加载网页后，先加载几页的图片，并显示，然后监听用户对网页的操作，再加载后续的图片。这样，如果用户仅仅浏览网页的一部分，那么后续的图片便不需要加载，从而减轻了服务器(后台服务器)的压力。图片懒加载虽然能够有效降低服务器的压力，然而，使用图片懒加载必须监听用户对网页的操作，不间断的查询或计算用户当前访问的位置，如果查询或计算的过程中出现异常，那么所有图片的加载顺序都将异常。也就是说，现有图片懒加载的方式加载网页图片的性能较差。因此，现有技术还有待于改进和发展。
技术实现思路
鉴于上述现有技术的不足，本专利技术的目的在于提供利用前端编程语言优化图片懒加载的方法以及电子设备，旨在解决现有图片懒加载的方式加载网页图片的性能较差的问题。本专利技术的技术方案如下：一种利用前端编程语言优化图片懒加载的方法，其包括：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标签全部执行完成，则将所本文档来自技高网...

【技术保护点】
1.一种利用前端编程语言优化图片懒加载的方法，其特征在于，包括：A、当网页通过图片懒加载的方式加载缓存图片时，判断所述缓存图片的当前节点是否渲染完成；B、当所述缓存图片的当前节点渲染完成时，将预先定义的缓存图片显示于网页中；C、获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及目标节点是否完成渲染；D、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，则获取目标图片的目标地址，并根据所述目标地址加载目标图片，并通过目标图片替换所述缓存图片，以及显示所述目标图片。

【技术特征摘要】
1.一种利用前端编程语言优化图片懒加载的方法，其特征在于，包括：A、当网页通过图片懒加载的方式加载缓存图片时，判断所述缓存图片的当前节点是否渲染完成；B、当所述缓存图片的当前节点渲染完成时，将预先定义的缓存图片显示于网页中；C、获取目标图片的目标节点，并判断目标节点是否满足预设的图片属性信息，以及目标节点是否完成渲染；D、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，则获取目标图片的目标地址，并根据所述目标地址加载目标图片，并通过目标图片替换所述缓存图片，以及显示所述目标图片。2.根据权利要求1所述利用前端编程语言优化图片懒加载的方法，其特征在于，所述图片属性信息包括参考节点、参照区域、相交区域和相交比例的一种的或几种。3.根据权利要求1所述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤C中，判断目标节点是否满足预设的图片属性信息具体包括：监听目标节点的位置是否发生变化；当发生变化时，判断目标节点的位置变化是否满足所述图片属性信息。4.根据权利要求1所述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤C中，判断目标节点是否完成渲染具体包括：将监听事件推入栈内存；等待监听事件是否接收到通知。5.根据权利要求4述利用前端编程语言优化图片懒加载的方法，其特征在于，所述步骤D具体包括：D1、当所述目标节点满足所述图片属性信息以及目标节点已经完成渲染时，向所述栈内存发送获取目标地址的指令；D2、读取所述栈内存中的目标地址，并根据目标地址加载目标图片；D3、通过目...

【专利技术属性】
技术研发人员：孙悦，李天驰，李涛，
申请(专利权)人：深圳点猫科技有限公司，
类型：发明
国别省市：广东,44