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

说明书

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

技术领域

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

背景技术

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

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

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

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

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

发明内容

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

本发明的技术方案如下：

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

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

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

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

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

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

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

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

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

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

将监听事件推入栈内存；

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

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