[发明专利]一种前端编程优化图片懒加载方法

说明书

本发明公开了一种前端编程优化图片懒加载方法，通过获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片，本申请提供的网页区块懒加载的方法和，通过对懒加载区块在发送容器信息时将容器的高度设置为区块高度，使得在后续加载网页区块至容器时，区块加载前后的容器高度不会发生变化，从而避免了网页区块懒加载时的页面抖动。

技术领域

本发明属于前端显示技术领域，具体涉及一种前端编程优化图片懒加载方法。

背景技术

随着互联网的发展，网页作为承载内容的载体，使用范围越来越广。在一些需要展示很多信息的网站，如果在加载网页的时候，一下子展示所有的信息，就会出现网页卡死、记载速度慢等情况。Lazyload，即懒加载(也称惰性加载)，具有延迟加载的特性，是一种常见前端性能优化方式。其主要用途是减少前端资源的加载量，即当网页页面滚动到相应的地方，对应位置的内容才进行加载显示，减少浏览器的负担。但实际应用中，随着开发人员的变动或者依赖变动，一些lazyload功能原本正常的网站，就会产生异常，加载一些并不需要加载的资源，导致浏览器负担加大，没有真正的起到懒加载的效果。为了提升用户打开网页时的初始速度，目前很多网页采用懒加载的技术。网页懒加载是指在加载页面时，先获取一部分信息展示，在触发某个动作的时候，客户端再向服务端发送相关，客户端到服务端相关信息并展示在页面上。一般使用浏览器的scroll事件监听来实现网页懒加载，scroll会监听浏览器滚动条的滚动，当滚动到某个设置好的滚动值之后，触发相应的事件方法与服务器端交互，客户端得到数据之后，把数据输出到网页上。

发明内容

本发明的目的在于提供一种前端编程优化图片懒加载方法，解决了现有技术中存在的短时间内前端资源过多导致网页卡顿的问题。

本发明所采用的技术方案是：一种前端编程优化图片懒加载方法，包括以下步骤：

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

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

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

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

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

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

向所述服务器发送对网页的浏览请求，并接收所述服务器返回的网页信息，所述网页信息包括：懒加载的网页区块的区块信息、以及高度上报标识。

在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源的步骤。

将网页区块的容器的初始高度值设置为所述区块高度，包括：根据所述区块高度，设置所述网页区块的容器的样式高度值。

一次性定时器用来判断所述参考元素是否出现在客户端浏览器的可视化窗口中。