Vue图像延迟渲染过程

Question

我有以下问题：我正在加载一个像这样的动态 src 的图像

:style="{ background: `url(${imageSrc}) center` }"

imageSrc 在哪里

require(`@/assets/img/${this.image}`)

一切正常，但我试图抽象我的组件并遇到一些奇怪的行为。这段代码位于 Podcast.vue -> 按预期完美运行。我创建了一个名为 PostList.vue 的新文件，并将 src 作为道具传递。如果我随后在 Podcast 中使用 PostList 组件，Podcast 页面不会按预期直接在单击时打开 - 而是等待图像完全加载并随后打开页面。这会产生 3-5 秒的延迟，这不是一个选项。它与作为道具传递的图像无关，当我对路径进行硬编码时完全一样。如果我只是再次从 PostList 中获取我的代码并直接在 Podcast.vue 中使用它 - 我将恢复旧的行为。这绝对是因为图像，如果我注释掉要求行 - 没有延迟。这只发生在页面加载后的第一次，之后它被缓存。

这是我的完整代码：

PostList.vue

<template>
  <div>

    <Breadcrumbs />

    <v-container fluid grid-list-md>
      <v-card class="custom-card-height">
        <v-layout row>
          <v-flex hidden-sm-and-down md6 pa-0 class="pic-cell" v-if="imageSrc">
            <img :src="imageSrc" :alt="postType">
          </v-flex>
          <v-flex md6 pa-0 class="meditation-content">
            <v-layout row wrap v-if="!loading">
              <v-flex xs6 sm3 class="entry" text-xs-center
                v-for="item of entries"
                :key="item.slug"
                @click="loadItem(item)"
              >
                <v-tooltip bottom>
                  <div slot="activator">
                    <div class="svg-inline" v-html="icon"></div>
                    <h4># {{ item.number }}</h4>
                  </div>
                  <div class="tooltip-content">
                    <h3>{{ item.title }}</h3>
                    <div v-html="item.content"></div>
                  </div>
                </v-tooltip>
              </v-flex>
            </v-layout>
            <LoadingSpinner v-else />
            <Pagination 
              v-if="pageCount"
              :page="page" 
              :pageCount="pageCount"
              @onPaginationInput="paginationHandler"
            />
          </v-flex>
        </v-layout>
      </v-card>

      <BackButton :backString="backString" :link="backLink" />

    </v-container>
  </div>
</template>

<script>
import PostMixin from '@/shared/mixins/post.mixin'
import EventBus from '@/shared/eventBus.js'
export default {
  name: 'post-list',
  mixins: [PostMixin],
  props: {
    postIcon: {
      type: String,
      required: true
    },
    image: {
      type: String,
      required: true
    },
    postType: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      icon: null,
      imageSrc: null
    }
  },
  created () {
    this.icon = require(`@/assets/icons/${this.postIcon}`)
    this.imageSrc = require(`@/assets/img/${this.image}`)
  },
  methods: {
    loadItem (item) {
      let eventString = ''
      switch (this.postType) {
        case 'meditation': eventString = 'playMeditation'; break
        case 'podcast': eventString = 'playPodcast'; break
        default: console.log('kein Posttype in PostIconList.vue')
      }
      EventBus.$emit(eventString, item)
    }
  }
}
</script>

播客.vue

<template>
  <PostList
    postType="podcast"
    postIcon="Icon_Pod_grau.svg"
    image="headphone-1868612_1920.jpg"
    backString="Zurück auf's Sofa"
    backLink="/sofa"
  />
</template>

<script>
import PostList from '@/components/PostList'
export default {
  name: 'kopfhoerer',
  components: {
    PostList
  }
}
</script>

post.mixin.js

import Service from '@/shared/services/post.service'
import BackButton from '@/components/BackButton'
import LoadingSpinner from '@/components/LoadingSpinner'
import Breadcrumbs from '@/components/Breadcrumbs'
import Pagination from '@/components/Pagination'

export default {
  components: {
    BackButton,
    LoadingSpinner,
    Breadcrumbs,
    Pagination
  },
  props: {
    postType: {
      type: String,
      required: true
    },
    baseType: {
      type: Boolean,
      required: false,
      default: false
    },
    detailLinkBase: {
      type: String,
      required: false
    },
    backLink: {
      type: String,
      required: false
    },
    backString: {
      type: String,
      required: false
    }
  },
  data () {
    return {
      service: {},
      entries: {},
      loading: true,
      page: 1,
      pageCount: null
    }
  },
  created () {
    this.service = new Service(this.postType, this.baseType)
    this.getPostList()
    this.getMetaData()
  },
  methods: {
    getPostList () {
      this.loading = true
      this.service.getPostList(this.page, this.activeCategory, this.activeAuthor).then(data => {
        this.entries = data
        this.loading = false
        this.pageCount = this.service.pages
      })
    },
    getMetaData () {
      this.service.getMetaData().then(data => {
        if (data.categories) this.categories = data.categories
        if (data.authors) this.authors = data.authors
      })
    },
    paginationHandler (page) {
      this.page = page
      this.getPostList()
    }
  }
}

提前致谢

Answer 1

据我了解，您在created() 方法上设置imageSrc 属性，这意味着created() 中的代码将在组件挂载之前执行，这就是您得到这种行为的原因，我会在这种情况下要做的是在计算属性中设置图像，例如：

computed: {
  imageSrc() {
    return require('...');
  }
}

这样，您可以确保一旦 webpack 加载图像就会设置图像并且您的应用程序行为不会受到影响。

剩下的就是对 UI/UX 做一些调整，我建议你使用 Medium 之类的东西来显示一个占位符，直到图像被加载，但这取决于你和你的设计 :) 干杯。