图片懒加载+函数节流（js简单实现）

最新推荐文章于 2024-05-31 10:24:04 发布

shaun-shao

最新推荐文章于 2024-05-31 10:24:04 发布

阅读量104

点赞数

分类专栏： JavaScript 文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_44184425/article/details/120800665

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

顶部的图片是用来表示刷新页面的时候如果图片已经出现在可视范围内（这时候还没触发 scroll 事件），需要给他们进行一次加载

<!DOCTYPE html>

<style>
  article {
    height: 2000px;
  }

  footer {
    height: 2000px;
  }

  .panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
  }

  .img {
    display: flex;
    justify-content: center;
  }
</style>

<html>

<body>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <article></article>
  <div class="panel">
    <p class="item"></p>
    <p class="item"></p>
    <p class="item"></p>
    <p class="item"></p>
    <p class="item"></p>
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <footer></footer>
</body>

</html>

<script>
  // 获取 DOM 对象
  const img = document.querySelector('.img img')
  const items = document.querySelectorAll('.panel>.item')

  lazyLoadingInit([img])
  // 函数节流
  const throttledLazyLoading = throttled(lazyLoading)
  window.addEventListener('scroll', () => {
    throttledLazyLoading([img])
  })


  /**
   * @param {Array} imageList
   * 
   * 图片懒加载初始化
   **/
  function lazyLoadingInit(imageList) {
    imageList.forEach(item => {
      if (item.offsetTop < document.documentElement.clientHeight) {
        items[4].innerHTML = `图片初始化成功！`
      }
    })
  }

  /**
   * @param {Array} imageList
   * 
   * 图片懒加载
   **/
  function lazyLoading(imageList) {
    // window.addEventListener('scroll', () => {
    let o = img.offsetTop
    let s = document.documentElement.scrollTop
    let c = document.documentElement.clientHeight

    let top = img.getBoundingClientRect().top

    items[0].innerHTML = `offsetTop = ${o}`
    items[1].innerHTML = `scrollTop = ${s}`
    items[2].innerHTML = `clientHeight = ${c}`
    items[3].innerHTML = `top = ${top}`
    // 方法一：clientHeight + scrollTop > offsetHeight
    // if (c + s > o) {
    //   items[4].innerHTML = `图片加载成功！`
    // }

    // 方法二：bound.top < clientHeight
    if (top < c) {
      items[4].innerHTML = `图片加载成功！`
    }
    // })
  }

  /**
   * @param {Function} fn 待装饰函数
   * @param {number} delay 重复触发判定时间
   * 
   * 函数节流
   **/
  function throttled(fn, delay = 500) {
    let timer = null
    return function (...args) {
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(null, args)
          timer = null
        }, delay)
      }
    }
  }
</script>

shaun-shao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载+函数节流（js简单实现）

顶部的图片是用来表示刷新页面的时候如果图片已经出现在可视范围内（这时候还没触发 scroll 事件），需要给他们进行一次加载<!DOCTYPE html><style> article { height: 2000px; } footer { height: 2000px; } .panel { position: fixed; top: 0; right: 0; width: 300px; }
复制链接

扫一扫