小程序图片懒加载

只会html的前端
734 阅读2分钟

看见网上很多人的思路都是监听页面的滚动事件,判断元素距离页面的top值是否是小于等于页面的可视高度，小于的话显示一张加载的图片，大于的话就显示原来的图片，这种方式有时候滑动过快的时候，图片会一直加载，不知道其他人有没有这种现象 

主要用到的是小程序的获取节点信息：createSelectorQuery和节点相交状态：createIntersectionObserver，不熟悉的可以看一下这篇博客：createSelectorQuery用法介绍

<view class="people-list-wrap">
  <view class='people-list clearfix' id="J_peopleList">
    <view class='item item-{{index}}' wx:for="{{imageList}}" wx:key="*this.src">
      <view class='a'>
        <view class='item-wrap'>
          <view class='img'>
            <image src='{{item.show ? item.src : item.space}}' class='{{item.show ? "active" : ""}}'></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

js核心代码

const { imageProPath } = require('../../utils/imageUrlUtil.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //图片主路径
    imagePath: imageProPath,
    //获取当前页面高度
    screeHeight:'',
    imageList: [
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855909968&di=e42990ec8a50e7d7d71404ca457387db&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw600h337%2F20180207%2Fe7e4-fyrhcqz5108515.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
      { src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598855976846&di=6ef3daf839acf7b60999dc7eaa0cd12e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F10%2F35%2F01300535207006136924355481012.jpg"},
      { src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
      { src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
      { src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
      { src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
      { src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
      { src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3180670796,81613988&fm=26&gp=0.jpg"},
      { src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
      { src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
      { src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
      { src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
      { src: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2635693847,3914934949&fm=26&gp=0.jpg"},
    ]
      // { src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let imageList = this.data.imageList  // 获取原数据
    for (let i in this.data.imageList){
      // 给每一个item追加一个属性，默认不显示
      this.data.imageList[i].show = false
      this.data.imageList[i].space = ''
      console.log(this.data.imageList[i])
      console.log(wx.createIntersectionObserver())
      wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.item-'+ i, (res) => {
        if (res.intersectionRatio > 0){
          imageList[i].show = true 
          imageList[i].space = 'https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif'
        }
        this.setData({ // 更新数据
          imageList
        })
      })
    }
  },
  showImg(){  // 判断高度是否需要加载
    wx.createSelectorQuery().selectAll('.item').boundingClientRect((res) => {
      const imageList = this.data.imageList
      const screeHeight = this.data.screeHeight
      res.forEach((item, index) => {
        if (item.top < screeHeight) { 
          imageList[index].show = true
          imageList[index].space = 'https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif'
        }
      })
      this.setData({
        imageList
      })
    }).exec()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

 
})

css代码

/* pages/libraryintroduction/libraryintroduction.wxss */
.library-introduction-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 2548rpx;
}
.people-list-wrap {
  min-height: 400rpx;
  width: 100%;
  margin-top: 10rpx;
  overflow: hidden
}

.people-list-wrap .people-list {
  width: 100%;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10rpx;
  box-sizing: border-box;
}

.people-list-wrap .people-list .item {
  width: 600rpx;
  height: 288rpx;
  position: relative;
  margin-bottom: 20rpx;
}

.people-list-wrap .people-list .item .a {
  display: block;
  text-decoration: none;
  height: 100%;
  width: 100%
}

.people-list-wrap .people-list .item image {
  width: 100%;
  height: 228rpx;
  transition: all .2s ease-in-out;
  opacity: 0;
}

.people-list-wrap .people-list .item image.active {
  opacity: 1
}

.people-list-wrap .people-list .item .info {
  padding-left: 10rpx
}

.people-list-wrap .people-list .item .info .name {
  color: #666;
  margin-right: 5rpx
}


.people-list-wrap .people-list .item-wrap {
  width: 228rpx;
  height: 288rpx;
  position: absolute;
  float: left;
  border: 1rpx solid #a0a0a0;
  background-color: #fff;
  -webkit-transition-property: width height border margin z-index;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-property: width height border margin z-index;
  -moz-transition-duration: .2s;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-property: width height border margin z-index;
  -ms-transition-duration: .2s;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-property: width height border margin z-index;
  -o-transition-duration: .2s;
  -o-transition-timing-function: ease-in-out;
  transition-property: width height border margin z-index;
  transition-duration: .2s;
  transition-timing-function: ease-in-out
}
avatar
文章
阅读
粉丝