图片懒加载
懒加载:滑动页面到能看到图片时再加载图片
难点:如何判断图片出现在了视口?如何控制图片的加载?
位置计算
判断图片出现在视口: clientTop，offsetTop，clientHeight 以及 scrollTop 各种关于图片的高度作比对
控制图片加载: 把图片路径储存在dom属性内如<img data-src="xxx.jpg" />,监听window.scroll事件,触发时img.src = img.datSet.src
DataSet API, 这里 data-src 和 datSet.src 似乎是用了这个 DataSet API,回头看看
getBoundingClientRect元素相对视口位置
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置
// 图片距离顶端的高度 < 视口的高度,说明出现在视口内了
img.getBoundingClientRect().top < document.documentElement.clientHeight;window.scroll监听 可以加个 防抖 或 节流
IntersectionObserver元素是否到了视口位置
IntersectionObserver监听当前元素是否到了当前视口位置
const observer = new IntersectionObserver((changes) => {
// changes: 目标元素集合
changes.forEach((change) => {
// intersectionRatio
if (change.isIntersecting) { // 代表目标元素可见
const img = change.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
observer.observe(img);IntersectionObserver 除了给图片做懒加载外，还可以对单页应用资源做预加载
loading=”lazy”浏览器自动懒加载
<img src="xxx.jpg" loading="lazy" />
存在浏览器兼容问题
文字超出省略
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
