Incremental Load feature

[averied]

Say the "images" array has a thousand elements. Would be nice to have a feature so that the images load while you scroll, like the typical "Load more" option.

Don't know if this is in the roadmap of the project.

[titusdecali]

I also need this for a current project

[nebloc]

You can achieve a load more button by doing something like the following:

<template>
  <div class="container is-fluid">
      <client-only class="container">
        <v-gallery :images="images" :index="index" @close="index = null" />
        <div class="columns is-multiline">
          <!-- v-gallery uses images array, where as the thumbnails below use the currentList computed variable -->
          <div
            class="image column is-3"
            v-for="(image, imageIndex) in currentList"
            :key="imageIndex"
            @click="index = imageIndex"
            :style="{ backgroundImage: `url('${image}')`, height: '300px' }"
          ></div>

          <!-- On click of the following div, add 10 to the $toShow variable -->
          <div
            class="image column is-3 button is-primary is-large"
            @click="loadMore"
            :style="{ height: '300px', textAlign: 'center', lineHeight: '300px' }"
          >Load more</div>
        </div>
      </client-only>
    </div>
  </div>
</template>

<script>
export default {
  name: "Collection",
  data() {
    return {
      toShow: 10, // Start with 10 images
      index: null,
      images: []
    };
  },
  computed: {
    // Current list of images to show on page
    currentList() {
      // current list is a slice of the first $toShow images from $images 
      return this.images.slice(0, this.toShow);
    }
  },
  methods: {
    loadMore() {
      this.toShow += 10;
    }
  }
};
</script>

Then you just need to find a way of triggering loadMore when the user has scrolled to the bottom.
Hope that helps.

[yehanny]

Another easy solution should be using vue-infinity-scroll.js (link) like this:

<div class="container" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="limit">
          <div
            class="image"
            v-for="(image, imageIndex) in image"
            :key="imageIndex"
            @click="index = imageIndex"
            :style="{ backgroundImage: 'url(' + image + ')', width: '300px' height:'200px' }"
          ></div>
</div>

data() {
    return {
      limit: 10, // Start with 10 images
      index: null,
      images: []
    };
  },