react实现图片懒加载（渐入）

Axlxhxx

已于 2023-10-12 16:28:48 修改

阅读量517

点赞数 1

文章标签： javascript 前端 html

于 2022-08-22 15:39:55 首次发布

本文链接：https://blog.csdn.net/creatlh/article/details/126467088

版权

组件部分

const imgGroup = [{ text: '', img: 'img1.png' },
{ text: '', title: '', img: 'img2.png' },
{ text: '', title: '', img: 'img3.png' },
{ text: '', title: '', img: 'img4.png' }]

//监听父级元素scroll
 document.querySelector('.main-container')!.addEventListener('scroll', (e => listenerScroll(e)))
  const listenerScroll = (e: any) => {
    document.querySelectorAll('#img-group').forEach((t: any) => {
      if (t.offsetTop - e.target.scrollTop < 900) { //判断dom与顶部距离
      t.src = require('../../assets/img/' + t.getAttribute('data-src')) // 添加图片真实路径
      t.className = 'img-ani' //动态命名className
      }
    })
    return(
      <ul>
          {
            imgGroup.map((e, index) => (
              <li key={index}>
                <img id='img-group' src='' data-src={e.img} /></li>
            ))
          }
        </ul>
    )

CSS部分

 .img-ani {
        animation: imgShow 2s;
            }
       
  @keyframes imgShow {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }