vue.js - Vue.js中图片加载后拖拽问题？

Question

使用vue搭建一个仿window系统。
大体实现思路是：
有一个config变量layers里面装的是每一个组件的相关配置。每一个组件都是以绝对定位的方式定位在页面上，x代表left,y代表top。
在拖动组件的时候，每触发一次mousemove事件就去修改这个config变量。从而实现拖动效果

在更换壁纸组件里，当使用img加载图片没有任何问题。

<div class="prev-view" v-for="item of 5" @click="changeWallpaper(item)">        <img :src="`/src/assets/wallpaper/windows${item}.jpg`" alt="" style="width: 100%; height: 100%;">      </div>

当使用background-image展示图片时拖拽会引起卡顿，但是在切换数次壁纸后就不卡顿了

      <div class="prev-view" v-for="item of 5" @click="changeWallpaper(item)" :style="`background: center / cover no-repeat url(/src/assets/wallpaper/windows${item}.jpg)`">      </div>

Answer 1

问题可能是由于背景图片在初次加载时并未完全加载，导致在拖动过程中需要重新绘制页面，从而引起卡顿。

在Vue.js中，你可以使用v-if或v-show指令来控制元素的显示和隐藏。你可以尝试在图片完全加载之后再显示元素，这样就不会在图片加载的过程中进行拖动操作。

此外，你可以尝试在图片加载完成之后再更新背景图片的样式，可以使用JavaScript的Image对象来监听load事件。以下是一个可能的解决方案：

new Vue({  el: '#app',  data: {    currentWallpaper: 0,    wallpapersLoaded: 0,    wallpapersToLoad: 5  },  methods: {    changeWallpaper(index) {      if (this.wallpapersLoaded < this.wallpapersToLoad) {        this.currentWallpaper = index;        this.loadWallpaper(index);      } else {        this.currentWallpaper = index;        this.updateWallpaperStyle();      }    },    loadWallpaper(index) {      const img = new Image();      img.src = `/src/assets/wallpaper/windows${index}.jpg`;      img.onload = () => {        this.wallpapersLoaded++;        this.updateWallpaperStyle();      };    },    updateWallpaperStyle() {      const wallpaperElement = document.querySelector('.prev-view');      wallpaperElement.style.backgroundImage = `url(/src/assets/wallpaper/windows${this.currentWallpaper}.jpg)`;      wallpaperElement.style.backgroundSize = 'cover';      wallpaperElement.style.backgroundRepeat = 'no-repeat';      wallpaperElement.style.backgroundPosition = 'center';    }  }});

在HTML中，你只需要简单地显示元素：

<div class="prev-view" v-for="item of 5" @click="changeWallpaper(item)"></div>

以上代码会首先加载所有图片，并在所有图片加载完成后更新背景图片的样式。这样可以确保在拖动过程中不会因为图片加载而引起卡顿。

注意，以上代码假设你只有一个需要加载背景图片的元素。如果你有多个元素需要加载背景图片，你可能需要对代码进行一些修改，以便为每个元素分别加载和更新背景图片。