Open dave-wind opened 1 year ago
伪代码 思路 首先思路 表示 需要监听滚动事件,判断元素是否在 可视范围内,再去加载图片
伪代码 思路
首先思路 表示 需要监听滚动事件,判断元素是否在 可视范围内,再去加载图片
1.如何判断元素是否在范围内? offsetTop: DOM对象的offsetTop，它是上边框相对于父元素上边框的距离，一般是固定的，不随滚动变化。 所以我们可以拿到 元素的 el.offsetTop 2.可视范围 是多少? pageYOffset: 返回视窗滚动过的距离 兼容性好; window.innerHeight: 浏览器窗口的视口（viewport）高度（以像素为单位） 所以 范围就是 window.pageYOffset < el.offsetTop < window.innerHeight + window.pageYOffset
3.如何做? let cb = ()=> { // 动态的获取 可视范围的 top 和 bottom top:window.pageYOffset bottom: window.innerHeight + window.pageYOffset } window.addEventListener('scroll', cb, false);
根据 组件props 原理 往下传递
给每个 ItemImg 组件 去判断是否在可视范围内, 如果不在 就展示 loading 如果在 new Image() img.onload = ()=> {} 去加载图片 替换 src 即可
Lazy Img
1.如何判断元素是否在范围内? offsetTop: DOM对象的offsetTop，它是上边框相对于父元素上边框的距离，一般是固定的，不随滚动变化。 所以我们可以拿到 元素的 el.offsetTop 2.可视范围 是多少? pageYOffset: 返回视窗滚动过的距离 兼容性好; window.innerHeight: 浏览器窗口的视口（viewport）高度（以像素为单位） 所以 范围就是 window.pageYOffset < el.offsetTop < window.innerHeight + window.pageYOffset
3.如何做? let cb = ()=> { // 动态的获取 可视范围的 top 和 bottom top:window.pageYOffset bottom: window.innerHeight + window.pageYOffset } window.addEventListener('scroll', cb, false);
根据 组件props 原理 往下传递
给每个 ItemImg 组件 去判断是否在可视范围内, 如果不在 就展示 loading 如果在 new Image() img.onload = ()=> {} 去加载图片 替换 src 即可