实现图片懒加载

项目中遇到一个公示信息列表，其中有图片预览，

image

因为窗口小、列表长、图片多，加载很慢，于是想把图片做成懒加载模式。

1.在style设置了scroll的dom上绑定滚动事件

@scroll="getImages"

2.定义加载图片的方法

getImages(val) {

   const that = this;

   let bars = document.querySelectorAll(".edu-container"); //图片容器

   let count = 0

   this.data.forEach((v, k) => {

     if(!v.imageUrl){ //加载过的不用重复赋值

       let scrolledHeight = val ? val.target.scrollTop : 0 //滚动超出可视范围的高度

       let containerHeight = document.getElementById("dispalyBar").offsetHeight  //滚动容器（设置了scroll的dom）的高度

       if(bars[count] && (scrolledHeight + containerHeight) > bars[count].offsetTop){  //offsetTop是图片容器到顶端的高度

         //为图片src赋值

       }

     }

     count++

   });

 },

如下图，(scrolledHeight + containerHeight) > bars[count].offsetTop表示进入了可视范围

image