图片延迟加载或者 dom延迟加载

最新推荐文章于 2024-01-24 14:39:21 发布

易之晓晓

最新推荐文章于 2024-01-24 14:39:21 发布

阅读量239

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_42306443/article/details/103561588

版权

html 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>Lazyload 1</title>
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      height: 200px;
    }

    .a {
      height: 400px;
      visibility: hidden;
    }

    .b {
      visibility: visible !important;
      animation-name: myfirst;
      animation-duration: 0.4s;
      animation-delay: 0.4s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    @keyframes myfirst {
      0% {
        /*visibility: hidden;*/
        background: rgba(255, 0, 0, 0);
      }

      25% {
        background: rgba(50, 0, 0, .2);
      }

      50% {
        background: rgba(100, 0, 0, .4);
      }

      100% {
        background: rgba(150, 0, 0, .8);
      }

    }
  </style>
</head>

<body>
  <div class='a'>
    1
  </div>
  <div class='a'>
    2
  </div>
  <div class='a'>
    3
  </div>
  <div class='a'>
    4
  </div>
  <div class='a'>
    5
  </div>

  <div class='a'>
    6
  </div>

  <div class='a'>
    24
  </div>
  <div class='a'>
    24
  </div>
  <div class='a'>
    24
  </div>


  <!-- <script>
    function throttle(fn, delay, atleast) {
      var timeout = null,
        startTime = new Date();
      return function () {
        var curTime = new Date();
        clearTimeout(timeout);
        if (curTime - startTime >= atleast) {
          fn();
          startTime = curTime;
        } else {
          timeout = setTimeout(fn, delay);
        }
      }
    }

    function lazyload(op = {
      a: "a"
    }) {
      var images = document.getElementsByClassName(op.a);
      var len = images.length;
      return function () {
        var seeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let a = seeHeight + scrollTop
        for (var i = 0; i < len; i++) {
          if (images[i].offsetTop < a) {
            document.getElementsByClassName('a')[i].classList.add('b')
          }

          // if (scrollTop > images[i].offsetTop + images[i].clientHeight || a < images[i].offsetTop) {
          //   document.getElementsByClassName('a')[i].classList.remove('b')
          // }
        }
      }
    }
    var loadImages = lazyload();
    loadImages(); //初始化首页的页面图片
    document.getElementsByClassName('a')[0].classList.add('b')
    window.addEventListener('scroll', throttle(loadImages, 0, 0), true);
  </script> -->


  <script>
    const a = {
      init(opt = {
        up: false,
        activeClass: null,
        className: null
      }) {
        const loadImages = this.lazyload({
          up: opt.up,
          activeClass: opt.activeClass,
          className: opt.className,
        });
        loadImages(); //初始化首页
        window.addEventListener('scroll', this.throttle(loadImages, 0, 0), true);
      },
      throttle: (fn, delay, atleast) => {
        let timeout = null,
          startTime = new Date();
        return function () {
          let curTime = new Date();
          clearTimeout(timeout);
          if (curTime - startTime >= atleast) {
            fn();
            startTime = curTime;
          } else {
            timeout = setTimeout(fn, delay);
          }
        }
      },

      lazyload: (option) => {

        let images = document.getElementsByClassName(option.className);
        let len = images.length;
        return function () {
          if (!option.activeClass && !option.className) {
            return
          }
          let seeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          let a = seeHeight + scrollTop
          for (let i = 0; i < len; i++) {
            if (images[i].offsetTop < a) {
              document.getElementsByClassName(option.className)[i].classList.add(option.activeClass)
            }

            if (option.up && scrollTop > images[i].offsetTop + images[i].clientHeight || a < images[i]
              .offsetTop) {
              document.getElementsByClassName(option.className)[i].classList.remove(option.activeClass)
            }
          }
        }
      }
    }
    a.init({
      activeClass: "b",
      className: "a",
    })
  </script>


  <!-- <script>
    function throttle(fn, delay, atleast) {

      var timeout = null,
        startTime = new Date();
      return function () {
        var curTime = new Date();
        clearTimeout(timeout);
        if (curTime - startTime >= atleast) {
          fn();
          startTime = curTime;
        } else {
          timeout = setTimeout(fn, delay);
        }
      }
    }

    function lazyload() {
      var images = document.getElementsByTagName('img');
      var len = images.length;
      var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历	
      return function () {
        var seeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = n; i < len; i++) {
          if (images[i].offsetTop < seeHeight + scrollTop) {
            if (images[i].getAttribute('src') === './images/loading.jpg') {
              images[i].src = images[i].getAttribute('data-src');
              images[i].style.display = "block";
            }
            n = n + 1;
          }
        }
      }
    }
    var loadImages = lazyload();
    loadImages(); //初始化首页的页面图片
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
  </script> -->


</body>

</html>