么是懒加载？

在Web开发中经常会遇到一些性能问题，有很多原因就是因为一次性请求过多导致的，而懒加载是一种在不影响原有界面，当界面需要展现给用户才进行加载和请求，常见的就是图片的加载，在很多电商页面中最常见，通过懒加载的方式提升了页面的性能，用户体验也会更好了。

为什么使用lozad.js

现有的延迟加载库依赖窗体的滚动事件，或者使用定期计时器并调用在需要延迟加载的元素上getBoundingClientRect()。然而，这种方法非常缓慢，因为每次调用getBoundingClientRect()强制浏览器重新布局整个页面而lozad.js不依赖这些，因此性能很好。

lozad.js介绍

• Github地址

https://github.com/ApoorvSaxena/lozad.js

lozad.js是使用纯JavaScript实现的不借助图像或iframe的高性能且轻量级可配置延迟加载器，它的思想是观察者模式

特点

• 纯js实现
• 非常轻量，压缩后只有1.04kb
• 零依赖
• 允许延迟加载动态添加的元素
• 支持图片、iframe、视频、音频、背景图片等
• 免费开源

最新版本在于有基础上性能得到了极大地提升。

安装使用

• 安装

npm install --save lozad

//OR

yarn add lozad

//OR

bower install lozad

• 使用

// using ES6 模块

import lozad from 'lozad'

// using CommonJS 模块

var lozad=require('lozad')

或者直接引用cdn或本地js

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

举例：

html：

<img class="lozad" data-src="image.png" />

js:

const observer=lozad(); // '.lozad'作为默认类选择器
observer.observe();

自己引入dom：

const el=document.querySelector('img');
const observer=lozad(el); 
document.querySelectorAll()
observer.observe();

自定义配置：

const observer=lozad('.lozad', {
 rootMargin: '10px 0px', 
 threshold: 0.1
});
observer.observe();

背景图片：

<div class="lozad" data-background-image="image.png">
</div>

IFrame：

<iframe data-src="embed.html" class="lozad"></iframe>

更多使用实例参考Github，提供了图片、背景图等使用方式

浏览器支持

支持大多数浏览器，如果不支持需要引入polyfill

总结

提升Web页面的性能方法多种多样，懒加载就是其中一种，如果你追求极致的性能，不妨试一试lozadjs，期待对你有所帮助！

、预加载

即图片提前加载，可以保证图片快速、无缝的发布，用户需要查看时可直接从本地缓存中渲染，适用于图片占据很大比例的网站。

二、懒加载

将图片src赋值为一张默认的图片，当用户滚动到可视区域的时候，再去加载真正的图片；

实现：对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。

html代码：

js代码：

vue中实现懒加载

直接使用现成插件：vue-lazyload

App.vue

main.js

关于vue-lazyload更多用法请看这里：https://www.npmjs.com/package/vue-lazyload

言

图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。

实现原理

加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、雪碧图等；懒加载也是其中一种，主要原理是将非首屏的图片src设为一个默认值，然后监听窗口滚动，当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

具体代码

首先在渲染时，图片引用默认图片，然后把真实地址放在data-*属性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是监听滚动，直接用window.onscroll就可以了，但是要注意一点的是类似于window的scroll和resize，还有mousemove这类触发很频繁的事件，最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法，这里先不多做介绍了。

接着要判断图片是否出现在了视窗里面，主要是三个高度：1，当前body从顶部滚动了多少距离。2，视窗的高度。3，当前图片距离顶部的距离。offsetTop相关属性可以参考这里，具体代码如下：

window.onscroll=_.throttle(this.watchscroll, 200);

watchscroll () {

var bodyScrollHeight=document.body.scrollTop;// body滚动高度

var windowHeight=window.innerHeight;// 视窗高度

var imgs=document.getElementsByClassName('lazyloadimg');

for (var i=0; i < imgs.length; i++) {

var imgHeight=imgs[i].offsetTop;// 图片距离顶部高度

if (imgHeight < windowHeight + bodyScrollHeight) {

imgs[i].src=imgs[i].getAttribute('data-src');

img[i].className=img[i].className.replace('lazyloadimg','')

}

}

}

学习交流加群：230354270

结语

大概内容就这么多了，下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断：

1.页面滚动离开首屏(这时可显示回到顶部的按钮):document.body.scrollTop > window.innerHeight

2.页面滚动到底部了(这时可去调接口获取更多内容)：window.scrollY + window.innerHeight > document.body.offsetHeight