// pages/demo1/item1.js
Component({
  /**
   * 组件的属性列表
   */
  externalClasses: ['custom-class'],
  options:{
    virtualHost: true
  },
  properties: {
    src:{
      value:'',
      type:String
    },
    customStyle:{
      value:'',
      type:String
    },
    mode:{
      value:'scaleToFill',
      type:String
    },
    webp:{
      value:false,
      type:Boolean
    },
    showMenuByLongpress:{
      value:false,
      type:Boolean
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    url:'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image.png',
    loading:false
  },
  observers:{
    'src':function(newVal,oldVal){
      this.createImage();
    }
  },
  /**
   * 组件的方法列表
   */
  lifetimes:{
    attached(){
      
    },
    detached(){
      this.detachedImage();
    }
  },
  ready(){
    
  },
  methods: {
    imgload(evt){
      // console.log("加载完成",evt)
      this.triggerEvent("load",evt);
    },
    imgerror(evt){
      this.triggerEvent("error",evt);
    },
    createImage(){
      this.detachedImage();
      this.data.loading=false;
      this._observer = wx.createIntersectionObserver(this);
      this._observer
        .relativeToViewport({bottom:30})
        .observe('.lazy-image', (res) => {
          //console.log(res);
          if(res.intersectionRatio > 0 && this.data.loading==false)
            this.setData({
              url: this.data.src,
              loading:true
            });
        });
    },
    detachedImage(){
      if(this._observer){
        this._observer.disconnect();
      }
    }
  }
});