[发明专利]页面资源按需加载的方法及装置

说明书

技术领域

本发明涉及网页开发技术领域，特别涉及一种页面资源按需加载的方法及 装置。

背景技术

目前，当用户浏览网页时，网页的加载机制是一次性加载网页中的所有图 片，需占用大量网络带宽以及流量进行加载，导致用户所需网络以及流量产生 高强度使用，同时，网页端服务器的压力也较大。因此，浏览网页时，使网页 页面按需加载获取信息，便可降低网页端服务器压力，降低网络占用以及减少 流量使用，同时，还可以加快网页加载速度。

发明内容

本发明的主要目的为提供一种页面资源按需加载的方法及装置，降低网页 端服务器压力，降低网络占用以及减少流量使用，同时，还可以加快网页加载 速度。

本发明提出一种页面资源按需加载的方法，包括：

将页面中图片地址保存在伪图片标签内，并获取图片在页面中的位置信息 放入图片位置数组中；

对页面的滚动条进行事件监听，根据位置信息从所述图片位置数组中检索 对应的图片；

根据所述位置信息检索出图片对应的图片地址，并将所述图片地址从所述 伪图片标签内移动至真图片标签内，进行加载。

进一步地，所述获取图片在页面中的位置信息放入图片位置数组中的步骤 为：

获取页面中的图片距离页面顶部的距离信息，并将所述距离信息放入图片 位置数组中。

进一步地，所述将页面中图片地址保存在伪图片标签内的步骤为：

通过JavaScript脚本将图片地址暂时存放在伪图片标签内。

进一步地，所述对页面的滚动条进行事件监听，根据位置信息从所述图片 位置数组中检索对应的图片的步骤包括：

通过JavaScript脚本对滚动条进行事件监听；当所述滚动条滚动时，滚动条 对应页面中的图片发生改变，根据滚动条对应的图片的位置信息从所述图片位 置数组中检索对应的图片。

进一步地，所述根据位置信息检索出图片对应的图片地址，并将所述图片 地址从所述伪图片标签内移动至真图片标签内，进行加载的步骤包括：

将图片的图片地址从所述伪图片标签内移动至真图片标签内的src属性中， 对图片自动进行加载。

本发明还提供了一种页面资源按需加载的装置，包括：

获取存放单元，将页面中图片地址存放在伪图片标签内，并获取图片在页 面中的位置信息放入图片位置数组中；

监听检索单元，对页面的滚动条进行事件监听，根据位置信息从所述图片 位置数组中检索对应的图片；

移动加载单元，根据所述位置信息检索出图片对应的图片地址，并将所述 图片地址从所述伪图片标签内移动至真图片标签内，进行加载。

进一步地，所述获取存放单元获取页面中的图片距离页面顶部的距离信息， 并将所述距离信息放入图片位置数组中。

进一步地，所述获取存放单元通过JavaScript脚本将页面中图片地址暂时存 放在伪图片标签内。

进一步地，所述监听检索单元通过JavaScript脚本对滚动条进行事件监听； 当所述滚动条滚动时，滚动条对应页面中的图片发生改变，根据滚动条对应的 图片的位置信息从所述图片位置数组中检索对应的图片。

进一步地，所述移动加载单元将图片的图片地址从所述伪图片标签内移动 至真图片标签内的src属性中，对图片自动进行加载。

本发明提出的页面资源按需加载的方法及装置，具有以下有益效果：

本发明提出的页面资源按需加载的方法及装置，将页面中的图片地址存放 在伪图片标签中，避免图片一次性全部加载占用太多网络以及流量，可降低网 页端服务器压力；通过监听滚动条位置对应页面中的图片，检索对应的图片， 将其图片地址移动至真图片标签中，自动加载图片，实现页面资源按需加载， 降低网页端服务器压力，提升网页加载速度。

附图说明

图1是本发明一实施例中的页面资源按需加载的方法示意图；

图2是本发明一实施例中的页面资源按需加载的方法流程示意图；

图3是本发明一实施例中的页面资源按需加载的装置结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说 明。

具体实施方式