Commit 2dc35775 authored by Jerome Chauveau's avatar Jerome Chauveau
Browse files

lazy loading for card images

parent 5a0eb0f4

src/components/JamaCollectionTile.vue

+4 −3
Original line number Diff line number Diff line
@@ -14,11 +14,12 @@ 
        @dragover.prevent

        @drop.prevent="dropped($event)"

      >

        <v-lazy v-if="collection.represented_by">

        <v-img

          v-if="collection.represented_by"

          height="80"

          height="120"

          :src="collection.represented_by.urls.m"

        />

        </v-lazy>

        <div v-else />



        <v-icon color="amber lighten-1">
@@ -105,7 +106,7 @@ export default { 
  align-items: center;

  justify-content: center;

  position: relative !important;



  overflow: hidden;

  //.collection-avatar {

  //  position: absolute;

  //  width: 100%;

src/components/JamaResourceTile.vue

+20 −16
Original line number Diff line number Diff line
@@ -14,11 +14,13 @@ 
        @dragstart="dragStarted($event)"

        @click="select()"

      >

        <v-lazy v-if="isImageResourceTile()" v-model="visible">

          <v-img

          v-if="isImageResourceTile() && iconLoaded"

            height="120"

            :src="resource.urls.m"

            @error="fetchTileImage()"

          />

        </v-lazy>

        <div

          v-else

          style="height: 130px"
@@ -68,13 +70,13 @@ export default { 
  data() {

    return {

      titleLimit: 25,

      iconLoaded : true,

      visible: false,

    }

  },



  watch: {

    resource: function(){

      this.iconLoaded = false;

      if(this.visible)

        this.fetchTileImage();

    }

  },
@@ -106,12 +108,12 @@ export default { 
    ...mapGetters(["isPickerMode", "currentResource"])

  },



  beforeMount() {

    if(this.isImageResourceTile()){

      this.iconLoaded = false;

      this.fetchTileImage();

    }

  },

  // beforeMount() {

  //   if(this.isImageResourceTile()){

  //     this.iconLoaded = false;

  //     //this.fetchTileImage();

  //   }

  // },



  methods: {

    select() {
@@ -147,19 +149,21 @@ export default { 


    async fetchTileImage(){

      let maxTrials = 30;

      this.visible = false;

      const sleep = (ms) => new Promise((r) => setTimeout(r, ms));//test

      for(let trials = 0; trials < maxTrials; trials++){

        console.info('try to fetch img, trial ' + trials);

        let r = await fetch(this.resource.urls.m);

        if(r.ok) {

          this.iconLoaded = true;

          console.debug('fetch success')

          this.visible = true;

          return;

        }

        else

          await(sleep(2000));

      }



      this.iconLoaded = false;

      //this.iconLoaded = false;



    },