Vue中瀑布流布局与图片加载优化的实现

<template>
  <div>
    <waterfall :items="items" :column-count="3">
      <template slot-scope="{ item }">
        <img :src="item.src" :alt="item.alt">
      </template>
    </waterfall>
  </div>
</template>
<script>
import Waterfall from 'vue-waterfall'
import { fetchImages } from './api'
export default {
  components: {
    Waterfall
  },
  data() {
    return {
      items: []
    }
  },
  async created() {
    this.items = await fetchImages()
  }
}
</script>

<template>
  <div class="waterfall" ref="container">
    <div v-for="(item, index) in items" :key="index" class="item" :style="item.style">
      <img :src="item.src" :alt="item.alt">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    this.items = await fetchImages()
  },
  mounted() {
    this.$nextTick(() => {
      this.initWaterfall()
    })
  },
  methods: {
    initWaterfall() {
      const container = this.$refs.container
      const items = container.querySelectorAll('.item')
      const columnCount = 3
      const columnHeights = Array(columnCount).fill(0)
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        const minHeight = Math.min(...columnHeights)
        const minIndex = columnHeights.indexOf(minHeight)
        const left = minIndex * item.offsetWidth / columnCount
        const top = minHeight
        item.style.left = `${left}px`
        item.style.top = `${top}px`
        columnHeights[minIndex] += item.offsetHeight
      }
    }
  }
}
</script>

<template>
  <div>
    <img v-for="(item, index) in items" :key="index" v-lazy="item.src" :alt="item.alt">
  </div>
</template>
<script>
import VueLazyload from 'vue-lazyload'
import { fetchImages } from './api'
export default {
  directives: {
    lazy: VueLazyload.directive
  },
  data() {
    return {
      items: []
    }
  },
  async created() {
    this.items = await fetchImages()
  }
}
</script>

<template>
  <div>
    <img v-for="(item, index) in items" :key="index" v-lazy="item.src" :alt="item.alt">
  </div>
</template>
<script>
import VueLazyload from 'vue-lazyload'
import { fetchImages } from './api'
export default {
  directives: {
    lazy: VueLazyload.directive
  },
  data() {
    return {
      items: []
    }
  },
  async created() {
    this.items = await fetchImages()
    this.preloadImages()
  },
  methods: {
    preloadImages() {
      const nextItems = this.items.slice(10, 20)
      nextItems.forEach(item => {
        const img = new Image()
        img.src = item.src
      })
    }
  }
}
</script>

<template>
  <div>
    <input type="file" @change="onFileChange">
    <img :src="imageUrl" :alt="alt">
  </div>
</template>
<script>
import VueImageCompressor from 'vue-image-compressor'
export default {
  components: {
    VueImageCompressor
  },
  data() {
    return {
      file: null,
      imageUrl: '',
      alt: ''
    }
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
      this.compressImage()
    },
    compressImage() {
      const options = {
        quality: 0.5
      }
      this.$compress(this.file, options).then(result => {
        this.imageUrl = result.dataURL
        this.alt = this.file.name
      })
    }
  }
}
</script>

<template>
  <div>
    <waterfall :items="items" :column-count="3">
      <template slot-scope="{ item }">
        <img :src="item.src" :alt="item.alt" v-lazy>
      </template>
    </waterfall>
  </div>
</template>
<script>
import Waterfall from 'vue-waterfall'
import VueLazyload from 'vue-lazyload'
import { fetchImages } from './api'
export default {
  components: {
    Waterfall
  },
  directives: {
    lazy: VueLazyload.directive
  },
  data() {
    return {
      items: []
    }
  },
  async created() {
    this.items = await fetchImages()
    this.preloadImages()
  },
  methods: {
    preloadImages() {
      const nextItems = this.items.slice(10, 20)
      nextItems.forEach(item => {
        const img = new Image()
        img.src = item.src
      })
    }
  }
}
</script>