练习七、通过elementUi实现图片懒加载以及下拉底部滚动条加载图片

1.1 功能描述

利用element-ui框架实现照片墙功能显示多张图片,并使用懒加载提高网页首次加载性能,每次滚动条下拉到图片底部加载一张图片,直至满足相应页面需要显示的数量。

2.1 主要考点

2.1.1 运用组件

  • elment-ui组件的懒加载lazy的运用。(提高首次加载页面的效率)参考官方文档:图片懒加载
  • elment-ui组件的InfiniteScroll无限加载的运用。(每次下拉加载一张图片)参考官方文档: InfiniteScroll无限加载

2.2.1 基本思路

  • 滚动容器需要固定宽度与高度,再者overflow:auto;需要设置滚动条,图片标签添加lazy属性值,当滚动下一图片时加载图片,这样可以提高页面的首次加载速度;
  • 当进度条滚动到底部时,触发v-infinite-scroll中的load方法。
  • load方法中,底部打开加载的显示,当图片添加到urls的json数组中时,再隐藏加载的显示。
  • 滚动进度条继续触发v-infinite-scroll
  • 当需要限制加载图片数量,使用infinite-scroll-disabled中的disabled。
  • computed来侦听数据属性disabled是否为ture,判断两个条件:1)this.loading是否为true(需要加载图片状态) 2)noMore是否为true(数量是否超过10)

3.1 踩到的坑

  • 问题1:初步添加图片懒加载代码,图片没有滚动效果。
  • 回答1:再次查看官方文档,要在上级node节点添加overflew:auto;才可以实现滚动。
    ———————————
  • 问题2:为什么在无限加载中,infinite-scroll-disabled的变量disabled,需要放在computed中?
  • 回答2:computed是用来监听一个属性受多个属性影响,即现在disabled需要受到loading以及图片json数组的长度两种属性影响。外加watch是用来监听一组数据影响多个数据,后期需要对这两个生命周期进行进一步的探讨以及学习。

4.1 相应框架或语言

  • 语言:html,js,css
  • 框架:elemnet-ui,vue 2.0

5.1 相关代码

<template>
  <div class="stylebg">
    4/2
    <div class="swiperView" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
      <el-image class="pic" v-for="(item,index) in urls" :key="index" :src="item.url" lazy></el-image>
      <div v-if="loading" class="textView">
        <img class="loadingIcon" src="@/assets/loadingGif.gif"></img>
      </div>
      <p v-if="noMore" class="textView">没有更多了</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      loading: false,
      urls: [
          {
            id:1,
            url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
          },
          {
            id:2,
            url:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
          },
          {
            id:3,
            url:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
          },
          {
            id:4,
            url:'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
          },
          {
            id:5,
            url:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
          },
          {
            id:6,
            url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
          },
          {
            id:7,
            url:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
          }
        ]
    }
  },
  mounted(){
  },
  computed: {
    noMore () {
      return this.urls.length >= 10
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load () {
      this.loading = true
      //使用定时器给图片对象末尾添加一张图片
      setTimeout(() => {
        this.urls.push({
          url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
        })
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style lang="less" scoped>
  .swiperView{
    height: 500px;
    overflow:auto;
    .pic{
      width:100%;
    }
  }

  .textView{
    width:100%;
    text-align: center;
    .loadingIcon{
      width: 50px;
      height: 50px;
    }
  }
</style>

6.1 运行截图

观察右边控制台当当第10张图是在滚动条最底部时,dom上div内部的image标签是隐藏的。当下拉到第10张图片的时候可以看到,dom上动态添加了image标签,同时完成了页面渲染。到第7张再次滚动的时候,通过定时器给图片对象数组最后一位添加一张图片,延时两秒后显示。
在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值