时间戳

首页 > 解决方案 > 一旦路由加载而不显示它们，我如何在 Vue.js 中加载图像？

css - 一旦路由加载而不显示它们，我如何在 Vue.js 中加载图像？

问题描述

我正在尝试在背景中添加 2 png 到 png 的过渡，并且能够在不同的场景（如客厅、餐厅等）之间切换。一旦我单击选择我要选择的房子的哪个区域的元素，图像就会被获取，但是因为加载需要一些时间，所以不会发生过渡，它们只会出现在背景图像的顶部，而不会平滑过渡从侧面。一旦路线被渲染，我需要一种方法来加载所有图像，或者如果你可以给我另一个解决方案，我很高兴听到这个问题。

这是模板

<template>
    <div>
        <div v-for="item in painting" :key="item.id" class="showroom">
            <div class="setting">
                <h1>{{ item.name }}</h1>
                <h3>Choose a room:</h3>
                <div v-for=" (room, idx) in rooms" :key="idx" id="roomSelection">
                    <img id="roomSelector" :src="room.roomview" @click="showRoom(room)">
                    <p>{{ room.name }}</p>
                    <br>
                </div>
                <p>Choose a wall color:  <span id="colorPicker" :style="{backgroundColor: color}"><input type="color" id="base" v-model="color"></span></p>
                <router-link to="/painting"><i class="fas fa-arrow-left"></i></router-link>
            </div>
            <div  class="display">
                <div :style="{backgroundColor: color}" class="wall">
                    <img :src="item.img">
                </div>
                <div class="forniture">
                    <transition name="slideIn">
                    <div v-for=" room in roomToShow" :key="room" class="setForniture">
                        <img  class="left" :id="room.space1" :src="room.forniture1">
                        <img  class="left" :id="room.space2" :src="room.forniture2">
                    </div>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

这是脚本

<script>
import { mapGetters } from 'vuex'
import sofa from '../assets/sofa.png'
import lamp from '../assets/lamp.png'
import table from '../assets/table.png'
import cabinet from '../assets/cabinet.png'
import chair from '../assets/chair.png'
import sidetable from '../assets/sidetable.png'
import livingroom from '../assets/livingroom.png'
import diningroom from '../assets/diningroom.png'
import lounge from '../assets/lounge.png'

export default {
    data(){
        return{
            color: '#243E36',
            rooms: [
                { name: "lounge", space1: 'lounge1', space2: 'lounge2', forniture1: chair, forniture2:sidetable, roomview: lounge},
                { name: "livingroom" , space1: 'livingroom1', space2: 'livingroom2',  forniture1:sofa, forniture2:lamp, roomview: livingroom },
                { name: "diningroom" , space1: 'diningroom1', space2: 'diningroom2', forniture1: table, forniture2: cabinet, roomview: diningroom }
            ],
            roomToShow: [],
        }
    },
    computed: {
        ...mapGetters([
            'showPainting',
            'forSale',
            'painting'
        ]),

    },
    methods: {
        showRoom(room) {
            setTimeout( () => {
                this.roomToShow.shift();
                this.roomToShow.push(room);   
            }, 100)   
        }
    }
</script>

标签： cssvue.jsvuex

解决方案

解决此问题的最简单方法是仅使用 CSS 隐藏图像，但仍然从头开始加载所有图像（渲染元素）。你可以通过动态添加一个类到当前可见的图像中来实现:class=""。

一个更复杂的解决方案（它还为您提供图像加载时间的回调）是为所有图像创建一个new Image()并对onload/做出反应onerror。像这样，您可以在不更改 HTML 的情况下使用 JS abd 加载开头的所有图像。这是此用例的示例：如何创建 JavaScript 回调以了解图像何时加载？

推荐阅读