实现图片懒加载/延迟加载的两种方式、vue自定义指令实现图片懒加载

本文由清尘发表于2021-04-26 08:32属于javascript分类

第一种:

查看演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载/延迟加载</title>
  <style>
    img{
      width: 100%;
      min-height: 300px;
    }
  </style>
</head>
<body>
  <img data-src="imgs/1.jpg" alt="">
  <img data-src="imgs/2.jpg" alt="">
  <img data-src="imgs/3.jpg" alt="">
  <img data-src="imgs/4.jpg" alt="">
  <img data-src="imgs/5.jpg" alt="">
  <img data-src="imgs/6.jpg" alt="">

<script>
  const imgs = [...document.getElementsByTagName('img')];
  let n = 0;
  lazyLoad();
  function lazyLoad(){
    //视口高度
    var innerHeight = window.innerHeight;
    //距离顶部的高度
    var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
    for(let i = n; i<imgs.length; i++){
      if(imgs[i].offsetTop<innerHeight + scrollTop){
        imgs[i].src = imgs[i].getAttribute('data-src');
        n = n + 1;
      }
    }
    
  }

  window.addEventListener('scroll',lazyLoad);
</script>
</body>
</html>

第二种:

查看演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载/延迟加载</title>
  <style>
    img{
      width: 100%;
      min-height: 300px;
    }
  </style>
</head>
<body>
  <img data-src="imgs/1.jpg" alt="">
  <img data-src="imgs/2.jpg" alt="">
  <img data-src="imgs/3.jpg" alt="">
  <img data-src="imgs/4.jpg" alt="">
  <img data-src="imgs/5.jpg" alt="">
  <img data-src="imgs/6.jpg" alt="">

<script>

  const imgs = [...document.getElementsByTagName('img')];

  if(IntersectionObserver){
    let lazyLoadObser = new IntersectionObserver((entries,observer) => {
      entries.forEach((entry,index) => {
        let lazyImage = entry.target;
        if(entry.intersectionRatio > 0){
          lazyImage.src = lazyImage.getAttribute('data-src');
          lazyLoadObser.unobserve(lazyImage);
        }

      })
    })

    for(let i = 0; i<imgs.length; i++){
      lazyLoadObser.observe(imgs[i]);
    }

  }

</script>
</body>
</html>

vue自定义指令实现图片懒加载

查看演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue自定义指令 图片懒加载/延迟加载</title>
  <style>
    img{
      width: 100%;
      min-height: 300px;
    }
  </style>
</head>
<body>
  <div id="app">
    <p v-for="item in imgs">
      <img v-lazyload="item">
    </p>
  </div>
<script src="../demopage/js/vue.min.js"></script>
<script>
  Vue.directive('lazyload',{
    bind:function(el,bind){
    let lazyLoadObser = new IntersectionObserver((entries,observer) => {
      entries.forEach((entry,index) => {
        let lazyImage = entry.target;
        if(entry.intersectionRatio > 0){
          lazyImage.src = bind.value;
          lazyLoadObser.unobserve(lazyImage);
        }

      })
    })
      lazyLoadObser.observe(el);
    }
  })
  var app = new Vue({
    el:"#app",
    data:{
      imgs:[
        'imgs/1.jpg',
        'imgs/2.jpg',
        'imgs/3.jpg',
        'imgs/4.jpg',
        'imgs/5.jpg',
        'imgs/6.jpg',
      ]
    }
  })
</script>
</body>
</html>