vue lazyload

前段时间 学习 mint-ui 里的 lazy load

有点好奇里面是怎样写的，就去看代码，然后发现代码里写着：

module . exports = require( " vue-lazyload ") ;

然后点那个 vue-lazyload，没错，就是那个  vue-lazyload ，有兴趣的童鞋可以去网上找资料看看vue-lazyload

的 使用，有很多。

今天心血来潮，想要学怎样实现的，具体怎样实现的就不说了，推荐一篇博客：

https://www.cnblogs.com/mdengcc/p/6773672.html

里面写的很详细。

下面写一写我自己的理解。

有个 bug

判断是否加载是通过图片位置与显示窗口的 相对位置大小决定的

在  isCanShow 函数中

let eleTop = ele . getBoundingClientRect() . top

// window 的 可视高度

let windowHeight = window . innerHeight

if ( eleTop + 10 < windowHeight)

需要通过向 图片位置中 插入一张 默认图片，让图片有高度(要不然原有的图片还没加载出来，img 标签的 高度 为 0，上面那个判断怎么看都是对的)   0 + 10 < windowHeight 始终成立

所以要向img 标签中插入一张已经 加载好的图片来充当临时高度，但是初始 的图片加载需要时间

so

在 

addListenner 函数中

setTimeout( () => {

if ( isCanShow( item)) { // 能否显示 上面的就是部分代码

return

}

// 若还不可以加载，就 显示默认图片

listenList . push( item)

// 监听 滚动

onListenScroll()

}, 50)

在 测试的时候，发现 一张不大的图片加载时间 在 12 ~ 32 这里用个 50