[发明专利]图片的懒加载方法及装置、介质和电子设备

说明书

本公开涉及网页优化技术领域，提供了一种图片的懒加载方法、图片的懒加载装置，以及实现上述图片的懒加载方法的计算机可读存储介质及电子设备。其中，该方法包括：为待懒加载的目标图片构建自定义元素；将目标图片的地址信息存储于自定义元素中；监测自定义元素，响应于自定义元素与视窗存在交叉区域，从自定义元素中获取上述地址信息；根据地址信息在视窗中显示上述目标图片，实现对目标图片的懒加载。本技术方案无需监听滚动事件，从而避免了监听滚动事件造成的计算资源的浪费，有利于提升图片的懒加载效率。同时，缓解浏览器的图片加载压力并增强用户浏览体验。

技术领域

本公开涉及网页优化技术领域，具体而言，涉及一种图片的懒加载方法、图片的懒加载装置，以及实现上述图片的懒加载方法的计算机可读存储介质和电子设备。

背景技术

图片作为一种网络资源，在被请求时将占用网络资源。若一次性将整个页面的所有图片加载完，将需耗费较长的首屏加载时间。为了解决这种问题，通过网页前端仅加载在浏览器当前视窗内出现时图片，达到减少首屏加载时间的技术称为“图片懒加载”。

相关技术提供的图片懒加载方法包括：图片标签的源文件(如，src属性)中不赋图片地址，并在图片标签上自定义一个属性来存放图片地址。在逻辑层初始的执行流程中，对所有图片进行一次额外的扫描，使得已经在视区的图片能正常显示，相当于手动触发一次滚动事件。监听页面的滚动事件。在滚动事件的回调里面选择页面所有的图片标签，依次判断是否在视区范围内，如果在视区范围，则设置图片标签的属性值为图片地址，实现图片的显示。

然而，相关技术提供的图片的懒加载方案计算量大，导致图片的懒加载效率低。

需要说明的是，上述背景技术部分公开的信息仅用于加强对本公开的背景的理解。

发明内容

本公开的目的在于提供一种图片的懒加载方法、图片的懒加载装置、计算机存储介质及电子设备，能够避免监听滚动事件导致的计算资源的浪费，进而至少在一定程度上提升对图片的懒加载效率。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一个方面，提供一种图片的懒加载方法，包括：

为待懒加载的目标图片构建自定义元素；将上述目标图片的地址信息存储于上述自定义元素中；监测上述自定义元素，响应于上述自定义元素与视窗存在交叉区域，从上述自定义元素中获取上述地址信息；根据上述地址信息，在上述视窗中显示上述目标图片，实现对上述目标图片的懒加载。

在本公开的一些实施例中，基于前述方案，上述为待懒加载的目标图片构建自定义元素，包括：为待懒加载的目标图片构建超文本标记语言格式的自定义元素；在上述自定义元素中设置钩子函数，以用于绑定交叉观察器和上述自定义元素；

上述监测上述自定义元素，包括：通过上述交叉观察器检测上述自定义元素。

在本公开的一些实施例中，基于前述方案，上述将上述目标图片的地址信息存储于上述自定义元素中，包括：将上述目标图片的地址信息存储于上述自定义元素的任一属性中。

在本公开的一些实施例中，基于前述方案，上述根据上述地址信息，在上述视窗中显示上述目标图片，包括：实例化图片标签对象；从上述自定义元素中获取上述地址信息，并将上述地址信息赋值给上述图片标签对象的属性，以在上述视窗中显示上述目标图片。

在本公开的一些实施例中，基于前述方案，上述为待懒加载的目标图片构建自定义元素，包括：为待懒加载的目标图片构建超文本标记语言格式的自定义元素；通过上述自定义元素继承超文本标记语言的元素类；

上述从上述自定义元素中获取上述地址信息，包括：通过超文本标记语言的元素类的属性获取方法获取上述地址信息。