一种前端编程优化图片懒加载方法与流程

文档序号:20017310发布日期:2020-02-25 10:48阅读:来源:国知局

技术特征:

1.一种前端编程优化图片懒加载方法,其特征在于,包括以下步骤:

步骤1:将所述网页区块的容器的初始高度值发送至所述客户端,以使得客户端设置容器的高度为所述初始高度值,获取客户端浏览器的可视化窗口的高度,获取参考元素距离网页顶部的高度;

步骤2:在接收到所述客户端发送的区块加载请求时,将所述网页区块的区块信息发送至所述客户端,以使得所述客户端根据区块信息将所述网页区块加载至所述容器,并且加载后的网页区块的高度为所述区块高度;

步骤3:判断参考元素距离网页顶部的高度是否小于客户端浏览器的可视化窗口的高度,若不是,则添加一个一次性定时器;

步骤4:添加客户端浏览器滚动条的监听事件;

步骤5:所述客户端浏览器滚动条发生滚动,并触发scrool事件的scrool方法,所述scrool方法判断所述一次性定时器t1的任务是否为空;若所述一次性定时器t1的任务不为空,则先清除所述一次性定时器t1的任务,然后执行步骤f;若所述一次性定时器t1的任务为空,则直接执行步骤f;

步骤6:判断所述参考元素是否出现在所述客户端浏览器的可视化窗口中,若是参考元素出现在所述客户端浏览器的可视化窗口中,则触发并执行懒加载动作,向所述服务器发送请求。

2.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述向所述服务器发送对网页的浏览请求,并接收所述服务器返回的网页信息,所述网页信息包括:懒加载的网页区块的区块信息、以及高度上报标识。

3.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板,并获取所述文档对象模板对应的预加载页面资源的步骤。

4.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述将网页区块的容器的初始高度值设置为所述区块高度,包括:根据所述区块高度,设置所述网页区块的容器的样式高度值。

5.根据权利要求1所述的一种前端编程优化图片懒加载方法,其特征在于,所述一次性定时器用来判断所述参考元素是否出现在客户端浏览器的可视化窗口中。

当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1