[发明专利]一种前端编程优化图片懒加载方法在审
申请号: | 201911022310.2 | 申请日: | 2019-10-25 |
公开(公告)号: | CN110837613A | 公开(公告)日: | 2020-02-25 |
发明(设计)人: | 陈奕博 | 申请(专利权)人: | 陈奕博 |
主分类号: | G06F16/957 | 分类号: | G06F16/957;G06F9/445 |
代理公司: | 西安弘理专利事务所 61214 | 代理人: | 王丹 |
地址: | 719006 陕西省*** | 国省代码: | 陕西;61 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 一种 前端 编程 优化 图片 加载 方法 | ||
1.一种前端编程优化图片懒加载方法,其特征在于,包括以下步骤:
步骤1:将所述网页区块的容器的初始高度值发送至所述客户端,以使得客户端设置容器的高度为所述初始高度值,获取客户端浏览器的可视化窗口的高度,获取参考元素距离网页顶部的高度;
步骤2:在接收到所述客户端发送的区块加载请求时,将所述网页区块的区块信息发送至所述客户端,以使得所述客户端根据区块信息将所述网页区块加载至所述容器,并且加载后的网页区块的高度为所述区块高度;
步骤3:判断参考元素距离网页顶部的高度是否小于客户端浏览器的可视化窗口的高度,若不是,则添加一个一次性定时器;
步骤4:添加客户端浏览器滚动条的监听事件;
步骤5:所述客户端浏览器滚动条发生滚动,并触发scrool事件的scrool方法,所述scrool方法判断所述一次性定时器T1的任务是否为空;若所述一次性定时器T1的任务不为空,则先清除所述一次性定时器T1的任务,然后执行步骤F;若所述一次性定时器T1的任务为空,则直接执行步骤F;
步骤6:判断所述参考元素是否出现在所述客户端浏览器的可视化窗口中,若是参考元素出现在所述客户端浏览器的可视化窗口中,则触发并执行懒加载动作,向所述服务器发送请求。
2.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述向所述服务器发送对网页的浏览请求,并接收所述服务器返回的网页信息,所述网页信息包括:懒加载的网页区块的区块信息、以及高度上报标识。
3.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板,并获取所述文档对象模板对应的预加载页面资源的步骤。
4.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述将网页区块的容器的初始高度值设置为所述区块高度,包括:根据所述区块高度,设置所述网页区块的容器的样式高度值。
5.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述一次性定时器用来判断所述参考元素是否出现在客户端浏览器的可视化窗口中。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于陈奕博,未经陈奕博许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201911022310.2/1.html,转载请声明来源钻瓜专利网。