美文网首页
利用函数节流完成图片懒加载

利用函数节流完成图片懒加载

作者: 糖小羊儿 | 来源:发表于2021-03-29 21:00 被阅读0次

图片懒加载比较适合用函数节流
如果利用函数防抖,那么加载过程中页面一直空白也不合适

<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in 9" :key="index">
        <!-- <img src="@/assets/img/1.jpg" alt="" /> -->
        <img
          ref="imgs"
          src="@/assets/wode.png"
          :data-src="require('@/assets/img/' + (index + 1) + '.jpg')"
          alt
        />
      </li>
    </ul>
  </div>
</template>
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      window.onscroll = self.throttle(function (e) {
        self.loadImg();
      });
    },
   //函数节流 过一段时间执行一次
    throttle(func, delay = 500) {
      let isRun = true;
      return function () {
        if (!isRun) {
          return;
        }
        isRun = false;
        setTimeout(() => {
          func.apply(this, arguments);
          isRun = true;
        }, delay);
      };
    },
    //防抖  操作结束之前一直不执行
    debounce(func, delay = 300) {
      let timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, arguments);
        }, delay);
      };
    },
//只有当图片距离顶部小于可视窗口的高度时才加载图片
    loadImg() {
      let imgs = this.$refs.imgs;
      imgs.forEach((item) => {
        let y = item.getBoundingClientRect().top;
        if (y < window.innerHeight) {
          item.src = item.dataset.src;
        }
      });
    },
  },
};

相关文章

  • 利用函数节流完成图片懒加载

    图片懒加载比较适合用函数节流如果利用函数防抖,那么加载过程中页面一直空白也不合适

  • 函数节流和函数防抖

    函数节流 还记得上篇文章中说到的图片懒加载吗?我们在文章的最后实现了一个页面滚动时按需加载图片的方式,即在触发滚动...

  • 懒加载+函数节流

  • vue 路由组件懒加载几种方式

    1第一种方式如图 2 利用函数懒加载 3单个组件懒加载

  • 前端图片懒加载及节流

    懒加载(lazyload)也叫延迟加载, 惰性加载. 实质是当网页页面滚动到相应的地方,对应位置的内容才进行加载显...

  • 懒加载事件-函数节流

    我们在web项目中经常会需要用到 图片懒加载 ,设置中我们需要监听scroll滚动条滚动事件 。这种事件响应得十分...

  • 项目优化

    图片懒加载,数据懒加载, 路由懒加载 1.图片懒加载原理 1.1 开始时 不设置src属性 1.2 图片在可视区域...

  • 瀑布流+懒加载+函数节流

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

网友评论

      本文标题:利用函数节流完成图片懒加载

      本文链接:https://www.haomeiwen.com/subject/dklihltx.html