Vue实现懒加载的基本思路

懒加载是前端开发者的基本功之一。实现懒加载肯定是要直接操作DOM的，这个没得跑，但我们可以想办法让流程尽可能优雅些。

基本结构

父组件是列表容器，子组件是列表中的项，如卡片、帖子等，承载图片的DOM对象由子组件直接管理。

<div class="list-container">
    <item v-for="post in postlist" :key="post.id" :images="post.images" :text="post.text"></item>
</div>

实现思路

准备工作

首先，我们需要一个父子组件都能访问和操作的数组imageList，可以考虑放在一个专门的模块里，父子组件各自import。

然后，我们定义一个名叫LazyImage的类，用于把图片的url和DOM绑定在一个对象里，方便操作：

class LazyImage {
    constructor(src) {
        this.src = src;           // 图片url或base64
        this.dom = null;          // 承载图片的DOM元素
        this.status = 'pending';  // 图片当前状态
    }
}

其中status表示图片资源当前的状态，有pending（未加载）、loading（加载中）、loaded（加载完成或失败）三个取值。

最后，我们需要一张占位图，用于图片加载完成前占位展示。

步骤1

当网页从服务器拉取到10条帖子时，每个帖子子组件各自把自己负责的图片和DOM对应起来，放进同一个LazyImage对象，然后push进imageList。

这一步有两个地方需要注意：

1. 承载图片的DOM对象，其src/background-image值应设为占位图，真正的图片url先保存在data-src属性里，用于图片url和DOM元素“相认”；

2. 在mounted钩子函数里直接访问this.$refs可能为空，因为此时真正的DOM渲染还没完成，可以放在this.$nextTick的回调函数里访问。

步骤2

在父组件里监听window的scroll事件，每次触发时，先把状态不为pending的图片给filter出去，然后检查一下imageList里的每个图片的DOM是否在当前可视范围内里，若是，则将其src/background-image替换为真正的图片url，不不不，直接替换链接不够优雅，若是原图很大，网速又不太快，图片就会像挤牙膏一样，一点一点地显露出来，令人捉急。我们可以先new一个Image对象，预加载原图，待图片加载完成后，再把真正的url替换上去，做到无缝切换。

注意点：

1. scroll事件触发频繁，为减轻对性能的影响，可以加上节流措施，比如设定滚动距离大于一定阈值时才触发对imageList的遍历检查；

2. 在首屏加载完成后，需要手动触发一次检查，否则在不滚动的情况下首屏图片不加载。

 

这样就轻松实现了图片的懒加载。