按需加载/懒加载-创新互联

按需解析HTML

镇赉ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

按需解析HTML,就是页面一开始不解析HTML,根据需要来解析HTML。解析HTML都是需要一定时间,特别是HTML中包含有img标签、引用了背景图片时,如果一开始就解析,那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等,这些一开始是不需要解析,可以按需解析。

实现按需解析,首先用html 这个标签来对忽略对HTML的解析。然后根据触发的动作,script里面的HTML获取出来,填充到对应的节点中

示例代码如下:

按需解析HTML

DEMO:http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html

在页面加载结束后,看到并没有图片加载的请求。

点击按钮之后执行了加载图片的操作,此时才在网络中看到图片的请求

这样减少了加载页面最开始的请求,减轻服务器的负载。

按需加载图片

按需加载图片,就是让图片默认开始不加载,而且在接近可视区域范围时,再进行加载。也称之为懒惰加载。大家都知道,图片一下子全部都加载,请求的次数将会增加,势必影响性能。

先来看下懒惰加载的实现原理。它的触发动作是:当滚动条拉动到某个位置时,即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤:

1)生成标签时,用data-src来保存图片地址;

(相当于加载转圈的图片)

2)记录的图片data-src都保存到数组里;

(保存真正的图片)

3)对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};

4)在函数lazyload中,按照下面思路实现:计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+ scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的按需加载;


当前文章:按需加载/懒加载-创新互联
分享URL:http://scyanting.com/article/dohiop.html