使用了懒加载以后，翻页数据更新，图片不更新的问题

[remberi]

[lowesyang]

请贴代码。

[remberi]

<template>
    <div class="imgList">
      <h2>{{title}}</h2>
      <ul>
        <li  v-for="(item,index) in specialList"  :key="item.id" :id="('hotImg_'+eleId+'_'+index)">
          <!-- <img :src="item.elementImg"> -->
          <!-- <img :data-src="item.elementImg" v-imgLazy:imgList="2" >  -->
          <lazy-image 
                :src='item.elementImg'
                :placeholder='placeholder'  />
        </li>
      </ul>
        <keyDo v-on:listenKeyCode="keyCode"  v-if="isShow"></keyDo>
    </div>
</template>
<style>
    h2{
      font-size:30px;
      margin-bottom: 35px;
      font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    }
    .imgList{
      position: relative;
      width: 1227px;
      min-height: 580px;
      margin-top: 15px;
    }
    .imgList li{
      float: left;
      margin-right: 30px;
      margin-bottom: 30px;
      width: 160px;
      height: 233px;
    }
    .imgList img{
      width: 100%;
      height: 100%;
    }
    .imgList img.hover{
      border:4px gold solid;
      margin: -4px;
      transition: all 0.2s;
      transform: scale(1.1);
      border-radius:8px;
    }
</style>
<script>
    import keyDo from '../components/keyDo.vue'

    export default {
        props:['initData'],
        data(){
          return{
            title:'',
            name:'imgList',
            placeholder:'../static/img_loading_160x230.png',
            itemNo:0,
            position:0,
            isShow:false,
            isEnd:false,
            specialList:[],
            eleId:'',
            pos:''
          }
        },
        beforeMount(){
          this.specialList = this.initData.elementList;
          this.eleId = this.initData.specialId;//默认数据第一个为组件内的id
          this.name = 'imgList_'+this.initData.specialId;//默认数据第一个为组件名字
          this.title = this.initData.specialName;//默认标题
        },updated(){

      },mounted(){

      },
        methods: {
            keyCode(kc) {
                if (kc == "KeyBack") {
                    this.back();
                }else if(kc == "right"){
                  this.right();
                }else if(kc == "left"){
                  this.left();
                }else if(kc == "down"){
                  this.down();
                }else if(kc == "up"){
                  this.up();
                }else if(kc == "KeyEnter"){
                  let layout = this.top[this.itemNo];
                 if(layout=="Subject_Detail_TP1"){
                     let url = this.top[this.itemNo].jsonUrl;
                     this.$router.push({name:"hotTopics",params:{jsonUrl:url}});
                 }else{
                     let url = this.specialList[this.itemNo].jsonUrl;
                     this.$router.push({name:"detail",params:{jsonUrl:url}});
                 }
                }
            }, back() {
                this.$router.go(-1);
            },down(){
              if(this.itemNo<=5){
                this.removeCss();
                this.itemNo+=6;
                this.addCss();
                let eleH = this.cEleOffsetTop('#hotImg_'+this.eleId+"_"+this.itemNo+' img');
                this.$emit('eleScroll',this.name,"down",eleH);
              }else{
                if(!this.isEnd){
                  this.removeCss();
                  this.isShow = false;
                  this.$emit('pressDown', this.isShow,this.eleId,"down");
                }
              }
          },up(){
            if(this.itemNo>5){
              this.removeCss();
              this.itemNo-=6;
              this.addCss();
              let eleH = this.cEleOffsetTop('#hotImg_'+this.eleId+"_"+this.itemNo+' img');
              this.$emit('eleScroll',this.name,'up',eleH);
            }else{
              this.removeCss();
              this.isShow = false;
              this.$emit('pressDown', this.isShow,this.eleId,"up");
            }


          },left(){
              if(this.itemNo==0)return;
                this.removeCss();
                this.itemNo--;
                this.addCss();
          },right(){
            if(this.itemNo==11||this.itemNo==5)return;
            this.removeCss();
            this.itemNo++;
            this.addCss();
          },addCss(){
            //console.log('#hotImg_'+this.eleId+"_"+this.itemNo+' img');
            $('#hotImg_'+this.eleId+"_"+this.itemNo+' img').addClass('hover');
          },removeCss(){
            $('#hotImg_'+this.eleId+"_"+this.itemNo+' img').removeClass('hover');
          },updateStast(bl,pos,isEnd){
            this.isShow = bl;
            this.pos = pos;
            if(bl){
              //console.log(this.name,bl,pos,isEnd);
              this.addCss();
              let eleH = this.cEleOffsetTop('#hotImg_'+this.eleId+"_"+this.itemNo+' img');
              this.$emit('eleScroll',this.name,this.pos,eleH);
            }
          },cEleOffsetTop(ele){
            let fEleDistance = $(ele).offset().top;
            //console.log("元素距离文档顶部的距离:"+fEleDistance);
            //console.log(this.name,"元素距离文档顶部的距离:"+(fEleDistance+258));
            let realHeight = fEleDistance+258;
            return realHeight;
          }
        },
        components: {
            keyDo
        },watch:{
          initData(){
            console.log('update');
            this.specialList = this.initData.elementList;
            // 数据更新组件id也需要更新
            this.specialList = this.initData.elementList;
            this.eleId = this.initData.specialId;//默认数据第一个为组件内的id
            this.name = 'imgList_'+this.initData.specialId;//默认数据第一个为组件名字
            this.title = this.initData.specialName;//默认标题
          }
        }
    }
</script>

initData里面的数据是父组件传递过来的，是不是要重新调用下懒加载的方法，不会Markdown 写法。。。见谅

[lowesyang]

嗯，组件里确实缺少当src变化的时候重新调用load方法。可以先采用主动调用的方式。
最近比较忙，会尽快push最新的版本。

[remberi]

watch:{
  src(){
    console.log("data-src 已经更新");
    console.log(this.$refs.target);
    this.$lazyImages.addImage(this.$refs.target);
    this.$refs.target.onload = () => {
      this.show = true;
    };
    this.$nextTick(function () {
      this.$lazyImages.loadImage();
    })
  }
}

增加一个watch 然后在LazyImage.js里面增加一个removeAllimage的方法就可以了

[remberi]

然后我调用的时候发现，每增加一个image都会去执行一次loadImage事件，这样感觉不是很好。。。不知道楼主有没有更优化的方法，比如等push完再去做遍历是否更好，然后事件触发的时候再去调用，比较符合按需加载的概念

[lowesyang]

对于连续push的行为，可以对loadImage封装一个debounce。debounce是实现在一段时间内的连续操作结束后才调用指定的方法。具体可以参考源码中的debounce实现。

[remberi]

=。=怎么判断push已经完成，感觉不管怎么样push完了，每个实例都是会去调一下loadImage

[remberi]

解决了。。。在父组件的updated里面
this.$nextTick(function() {
this.$lazyImages.loadImage();
})