zoukankan      html  css  js  c++  java
  • 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. 在首屏加载完成后,需要手动触发一次检查,否则在不滚动的情况下首屏图片不加载。

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

  • 相关阅读:
    self 和 super 关键字
    NSString类
    函数和对象方法的区别
    求两个数是否互质及最大公约数
    TJU Problem 1644 Reverse Text
    TJU Problem 2520 Quicksum
    TJU Problem 2101 Bullseye
    TJU Problem 2548 Celebrity jeopardy
    poj 2586 Y2K Accounting Bug
    poj 2109 Power of Cryptography
  • 原文地址:https://www.cnblogs.com/leegent/p/9495787.html
Copyright © 2011-2022 走看看