vue 动态背景图如何解决闪烁？

  • Z时代
  • 2024-03-01
  • 分类：IT

  <div
    v-for="e in left"
    :key="e.name"
    @click="$router.push({ name: e.name })"
    :style="{
      backgroundImage: `url(${require('@/assets/images/' +
        ($route.name == e.name ? e.sel : e.nor))})`,
    }"
  ></div>

切换会有概率出现闪烁

回答：

vue 动态背景图如何解决闪烁？
这里先提前初始化时导入好再使用, 你的现在是每次切换每次都是重新导入, 会费时间, 并且也可以加一个CSS, 做切换优化:

.fade-bg {
  transition: background-image 0.3s ease-in-out;
}

回答：

闪烁的问题可能是由于每次路由切换时，都需要重新加载并应用背景图导致的。你可以试着把背景图片提前加载并缓存，这样在切换路由时就不会出现闪烁现象。

以下是一个简单的解决方案：

在 Vue 实例的 data 对象中添加一个新属性 backgroundImages，用于存储预加载的背景图：

data() {
  return {
    backgroundImages: {},
  };
},

在 mounted 钩子中预加载所有的背景图，并将它们存储在 backgroundImages 属性中：

mounted() {
  this.left.forEach((e) => {
    const normalImage = require('@/assets/images/' + e.nor);
    const selectedImage = require('@/assets/images/' + e.sel);
    this.$set(this.backgroundImages, e.name, {
      normal: normalImage,
      selected: selectedImage,
    });
  });
},

更新模板，使用预加载的背景图：

<div
  v-for="e in left"
  :key="e.name"
  @click="$router.push({ name: e.name })"
  :style="{
    backgroundImage: `url(${backgroundImages[e.name][$route.name === e.name ? 'selected' : 'normal']})`,
  }"
></div>

这样，在切换路由时，应该不会出现闪烁现象。因为所有的背景图已经预先加载并缓存，不需要再重新加载。

以上是 vue 动态背景图如何解决闪烁？ 的全部内容， 来源链接： utcz.com/p/934045.html

回到顶部