图片懒加载就是当图片过多时的一个加载方式，当图片出现在视口才加载

前言

通常在许多网站都能看到懒加载的的身影，因为网站对于用户体验越来越重视，而懒加载也会伴随一理解的问题。

监听滚动问题

当我们通过监听滚动事件的形式去决定图片是否懒加载时，页面刷新时不会立即执行监听函数，因为此时页面并没有滚动，这会造成当前页面需加载的图片呈现懒加载的状态，此时需要在代码中立即执行一次该函数才能实现对应效果

transition问题

当我们使用routerview+transition时，对应页面跳转时会有对应过渡效果，因为图片懒加载是在挂载后监听图片的offsetTopl来决定是否加载的

该过渡效果是这样的

text
.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s ease;
}
​
.fade-enter-from {
  transform: translateY(100vh);
}
.fade-leave-to {
  transform: translateY(100vh);
}

这回造成一个问题,第一次获取到的图片状态时这样的

text
DOMRect {
    bottom: 1301.8125305175781
    height: 211.60000610351562
    left: 250.60000610351562
    right: 1287.4000549316406
    top: 1090.2125244140625
    width: 1036.800048828125
    x: 250.60000610351562
    y: 1090.2125244140625
  …
}

可以看到该dom的top是1090，就是该dom在他的父容器高度加上视口高度的和，因为过渡效果刚开始就触发了一次检测，此时它是不在视口内的，所以加载时会出现在视口但任然不加载。

如何解决

通过监听transition的动画结束

transitionend

监听该dom的动画效果结束

text
dom.addEventListen("transitionend",dosomething)

所以我们可以在该dom元素上监听动画结束然后触发一次图片懒加载检测

text
const categoryRef = ref();
onMounted(() => {
  categoryRef.value.ontransitionrun = () => {
    emitter.emit("DetailScroll");
  };
});

但是还会存在一个问题，假如说该dom元素有多个过渡效果，例如hove效果，这是hover触发也会触发一次图片懒加载检测，这回照成没必要的开销，我们当前只针对于路由过渡，其他元素触发transitionend不需要有其他操作，我们可以通过设置一个控制阀解决它。

但是我用transitionend监听时总是有时候监听到有时候又监听不到，我真裂开，最后通过将监听更换成ontransitionrun的形式解决

text
const categoryRef = ref();
onMounted(() => {
  let flag = true;
  categoryRef.value.ontransitionrun = () => {
    if (!flag) return;
    emitter.emit("DetailScroll");
    flag = false;
  };
});