本发明涉及网页加载领域，尤其涉及一种简便的网页懒加载方法。
背景技术
随着互联网的发展，网页作为承载内容的载体，使用范围越来越广。在一些需要展示很多信息的网站，如果在加载网页的时候，一下子展示所有的信息，就会出现网页卡死、记载速度慢等情况。为了提升用户打开网页时的初始速度，目前很多网页采用懒加载的技术。网页懒加载是指在加载页面时，先获取一部分信息展示，在触发某个动作的时候，客户端再向服务端发送相关，客户端到服务端相关信息并展示在页面上。一般使用浏览器的scroll事件监听来实现网页懒加载，scroll会监听浏览器滚动条的滚动，当滚动到某个设置好的滚动值之后，触发相应的事件方法与服务器端交互，客户端得到数据之后，把数据输出到网页上。
技术实现要素：
本发明的目的在于提出一种简便的网页懒加载方法，通过提高网页懒加载时监听浏览器滚动事件的性能，解决网页在加载多数据页面时，出现页面卡顿、加载时间长问题，达到减少用户等待页面加载的时间，提高用户体验。
为达此目的，本发明采用以下技术方案：
一种简便的网页懒加载方法，包括客户端浏览器和服务器，所述客户端浏览器与所述服务器之间进行数据交互；
包括页面触发懒加载的过程：
步骤a：获取客户端浏览器的可视化窗口的高度，设置为ht；
步骤b：获取参考元素距离网页顶部的高度，设置为ht1；
步骤c：判断参考元素距离网页顶部的高度ht1是否小于客户端浏览器的可视化窗口的高度ht2，若不是，则添加一个一次性定时器，设置为t1；
步骤d：添加客户端浏览器滚动条的监听事件，即scrool事件；
步骤e：所述客户端浏览器滚动条发生滚动，并触发scrool事件的scrool方法，所述scrool方法判断所述一次性定时器t1的任务是否为空；
若所述一次性定时器t1的任务不为空，则先清除所述一次性定时器t1的任务，然后执行步骤f；
若所述一次性定时器t1的任务为空，则直接执行步骤f；
步骤f：判断所述参考元素是否出现在所述客户端浏览器的可视化窗口中，若是参考元素出现在所述客户端浏览器的可视化窗口中，则触发并执行懒加载动作，向所述服务器发送请求；
步骤g：循环执行步骤e和步骤f。
优选的，包括判断所述参考元素是否出现在客户端浏览器的可视化窗口中的过程：
步骤f1：重新获取参考元素距离网页顶部的高度，设置为ht2；
步骤f2：获取客户端浏览器滚动条的滚动值，设置为value；
步骤f3：判断ht2减去value的值是否小于客户端浏览器的可视化窗口的高度ht，若小于，则所述参考元素出现在客户端浏览器的可视化窗口中，若不小于，则所述参考元素没有出现在客户端浏览器的可视化窗口中。
优选的，包括执行网页懒加载动作的过程：
步骤f1：当参考元素出现在所述客户端浏览器的可视化窗口中，所述客户端浏览器向所述服务器发送页面请求；
步骤f2：所述服务器接收到页面请求后，向所述客户端浏览器返回接口信息；
步骤f3：所述客户端浏览器接收接口信息，然后解析接口信息，展示信息并将信息添加在页面上的参考元素前。
优选的，包括客户端浏览器与服务器进行交互的过程：
步骤一：所述客户端浏览器向所述服务器发送页面请求；
步骤二：所述服务器接收到所述页面请求后，向所述客户端浏览器发送页面信息；
步骤三：所述客户端接收到页面信息，然后解析并展示页面信息；
步骤四：执行网页懒加载动作。
优选的，所述一次性定时器的任务为判断所述参考元素是否出现在客户端浏览器的可视化窗口中。
本发明的有益效果：
1、改善了网页在加载多数据页面的时候，页面卡段、加载时间长的问题；
2、提高网页懒加载的时候在监听浏览器滚动事件的性能；
3、减少用户在等待页面加载时间，提高用户体验。
附图说明
图1是本发明的页面触发懒加载的流程图；
图2是本发明的判断参考元素是否出现在客户端浏览器的可视化窗口中的流程图；
图3是本发明的网页懒加载中客户端浏览器和服务器之间的交互流程图。
具体实施方式
下面结合附图并通过具体实施方式来进一步说明本发明的技术方案。
本实施例的一种简便的网页懒加载方法，包括客户端浏览器和服务器，所述客户端浏览器与所述服务器之间进行数据交互；
如图1所示，包括页面触发懒加载的过程：
步骤a：获取客户端浏览器的可视化窗口的高度，设置为ht；
步骤b：获取参考元素距离网页顶部的高度，设置为ht1；
步骤c：判断参考元素距离网页顶部的高度ht1是否小于客户端浏览器的可视化窗口的高度ht2，若不是，则添加一个一次性定时器，设置为t1；
步骤d：添加客户端浏览器滚动条的监听事件，即scrool事件；
步骤e：所述客户端浏览器滚动条发生滚动，并触发scrool事件的scrool方法，所述scrool方法判断所述一次性定时器t1的任务是否为空；
若所述一次性定时器t1的任务不为空，则先清除所述一次性定时器t1的任务，然后执行步骤f；
若所述一次性定时器t1的任务为空，则直接执行步骤f；
步骤f：判断所述参考元素是否出现在所述客户端浏览器的可视化窗口中，若是参考元素出现在所述客户端浏览器的可视化窗口中，则触发并执行懒加载动作，向所述服务器发送请求；
步骤g：循环执行步骤e和步骤f。
监听浏览器滚动条滚动的时候，滚动条滚动，就会多次触发条用事件的处理逻辑，当逻辑比较复杂的时候就会造成一定的性能影响。而我们采用定义一个一次性定时器的方法，用这种方法延迟调用逻辑处理方法，当事件频繁调用时，就会清除上次的一次性定时器，延时函数就不会被调用执行，直到滚动结束时，最后一次执行scrool函数时，绑定的延时函数才会被执行。而定时器的延迟时间要定在用户可接受的范围之内，实践测试为10-200毫秒，具体数据根据实际测试结果进行设置。
优选的，如图2所示，包括判断所述参考元素是否出现在客户端浏览器的可视化窗口中的过程：
步骤f1：重新获取参考元素距离网页顶部的高度，设置为ht2；
步骤f2：获取客户端浏览器滚动条的滚动值，设置为value；
步骤f3：判断ht2减去value的值是否小于客户端浏览器的可视化窗口的高度ht，若小于，则所述参考元素出现在客户端浏览器的可视化窗口中，若不小于，则所述参考元素没有出现在客户端浏览器的可视化窗口中。
优选的，如图3所示，包括执行网页懒加载动作的过程：
步骤f1：当参考元素出现在所述客户端浏览器的可视化窗口中，所述客户端浏览器向所述服务器发送页面请求；
步骤f2：所述服务器接收到页面请求后，向所述客户端浏览器返回接口信息；
步骤f3：所述客户端浏览器接收接口信息，然后解析接口信息，展示信息并将信息添加在页面上的参考元素前。
优选的，如图3所示，包括客户端浏览器与服务器进行交互的过程：
步骤一：所述客户端浏览器向所述服务器发送页面请求；
步骤二：所述服务器接收到所述页面请求后，向所述客户端浏览器发送页面信息；
步骤三：所述客户端接收到页面信息，然后解析并展示页面信息；
步骤四：执行网页懒加载动作。
优选的，所述一次性定时器的任务为判断所述参考元素是否出现在客户端浏览器的可视化窗口中。
以上结合具体实施例描述了本发明的技术原理。这些描述只是为了解释本发明的原理，而不能以任何方式解释为对本发明保护范围的限制。基于此处的解释，本领域的技术人员不需要付出创造性的劳动即可联想到本发明的其它具体实施方式，这些方式都将落入本发明的保护范围之内。