VUE实现懒加载,求实例代码
发布于 2年前 作者 nuaajiangteng 1142 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

VUE实现懒加载,求实例代码

2 回复
<style type="text/css">
  img{
    display: block;
    margin-bottom: 30px;
    width: 200px;
    height: 200px;
  }
</style>
<template>
  <div class="img-container">
    <img v-lazy="img" v-for="img in imgs">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgs:['/static/img/1.png','/static/img/2.png','/static/img/3.png','/static/img/4.png','/static/img/5.png']
    }
  },
  directives:{
    lazy:{
      bind(el,bingding) {
        el.src ='/static/img/loading.gif';
      },
      inserted(el,bingding) {
        var seeHeight,scrollTop;
        function init() {
          seeHeight = document.documentElement.clientHeight;
          scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          if(el.offsetTop < seeHeight + scrollTop) {
            if(/\/static\/img\/loading\.gif/.test(el.src)){
               el.src = bingding.value;
            }
          }
        }
        init();
        window.addEventListener('scroll',init);
      }

    }
  }
}
</script>

这样不知道对不对

嗯,我先试试,谢了

回到顶部