What is the best way in Vue.js to preload images upon the route being loaded without immediately showing them?

Looking to implement a smooth transition effect when switching between different scenarios in a web application. The issue arises when fetching images takes time, resulting in abrupt appearance instead of a gradual transition. Seeking a solution to preload all images upon route rendering to ensure smooth transitioning. Open to alternative suggestions to resolve the problem.

Below is the template:

<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>

This is the script:

<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>

Answer №1

To address this issue efficiently, consider using CSS to hide the images while still rendering all elements from the start. One way to achieve this is by dynamically assigning a class to the currently visible image using :class="".

For a more sophisticated approach that also provides a callback for image loading events, you can create a new Image() for each image and handle onload/onerror events. This allows you to load all images using JavaScript without altering the HTML structure. You can refer to this example for implementation guidance: How to create a JavaScript callback for knowing when an image is loaded?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger a Vue update upon detecting a new ID in the URL

Within my Vue2 application, I have implemented the use of the id parameter within a component that occupies the primary view. For example, http://localhost:8080/#/basereports/watercombochart/129 This URL signifies that the chart with id settings correspon ...

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

What is the reason border property does not transition effectively?

I am trying to remove the border property after a certain period of time (1 second) and make it smooth. Here is what I have attempted: var elem = $('div').css({'border-top':'6px solid #FC9A24', 'border-le ...

Styling a dynamically-injected div using an AJAX request (xhrGet)

Hello everyone, currently I am using the code below to fetch updated content after receiving a "push" event from a server. The new content is then used to replace the existing div/content. However, I'm facing an issue where none of my styles from the ...

How can you showcase the content of an object within an array?

I am currently working on a project component that involves retrieving and logging data. However, I am facing an issue with accessing objects within my array of clients to display them properly in my table. Here is the script I am using: <script> ex ...

Show the bottom left quarter of the image in an HTML display

Currently, I am still new to HTML coding and experimenting with displaying specific sections of an image. The current code I have is this: <img id="theImg" style="width:100%;" src="https://'myimage.jpg'" /> I'm struggling to figure o ...

Which option would be more beneficial for crafting a responsive UI: integrating a UI framework with three.js or solely relying on vanilla

In my quest to create a 3D editor using three.js, I find myself in uncharted territory. While I have a good grasp of JavaScript and three.js, my knowledge of web development and UI frameworks is lacking. Mrdoob's editor utilizes plain JavaScript for U ...

Changing colors when hovering over different elements

I am struggling to create a hover color change effect that applies to all elements (icon, text, and button) from top to bottom. Currently, the hover effect only changes the color of either the text and icon or the button individually. Below is the code sn ...

Can you explain the connection between CSS and WebKit?

Lately, the tag "webkit" has caught my eye on various questions. These inquiries typically pertain to web-related topics like CSS, jQuery, website layouts, and cross-browser compatibility problems... But what exactly is "webkit" and how does it interact w ...

Unable to modify the border color of the outline in MUI text fields

I am currently working on a React project using MUI and styled-components, but I am facing an issue with changing the outline border color of a textfield. Despite reading the documentation and attempting to overwrite the class names of the component, it do ...

Creating a resilient CSS: DOM for seamless printing in PDF or on physical printers

I need help with formatting a list of col-6 elements (bootstrap) inside a row element so that the content of each block remains intact in a pdf preview generated using print(). I attempted to use various css properties like page-break and break as suggeste ...

How can I achieve a transparent background for a text field in CSS instead of white?

I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...

Can you explain the distinction between Vue's 'v-on' directive and vue.$on method?

If I have two sibling components set up like this: <div id="root2"> <some-component>First</some-component> <some-component>Second</some-component> </div> ... and these components are coded as follows: Vue.comp ...

Encountered a Webpack issue when trying to load the primeng.min

I recently initiated a fresh project using yo aspnetcore-spa. My goal is to integrate the PrimeNG component library. Upon installing font-awesome and primeng: npm install font-awesome primeng --save I included CSS in the webpack vendor list: vendor: [ ...

Navigating Liferay Portlet in reverse order

I am facing an issue with right to left alignment in my portlet. It displays correctly when tested on a regular HTML page, but switches to left to right alignment when integrated into a Liferay portlet. Below is the code snippet causing this problem: < ...

Stopping background content from scrolling while using position: fixed

Is there a way to prevent content from scrolling behind a fixed position element? Check out the demo here .navbar-default { background-color: #4c68f9; margin-bottom: 0; border: none; } .navbar-default.affix { background-color: #4762ed; margin ...

Tips for obtaining the XPath for an unordered list and a span element

My goal is to find the xpath that will select the seat "12A" from a webpage containing a list of seats. Here's the source code: <div class="seats" style="top: 48px;"> <ul class="row_12 leftOfAisle"> <li><a class="" data-r ...

1. "Customizing Navbar height and implementing hover color for links"2. "Tips for

Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

Tips for creating a responsive navigation bar using your own custom CSS styling

While working on a website using bootstrap, I encountered an issue with responsiveness when adjusting the text size and gap of the navigation items. By increasing the size and adding a gap through fs-4 and style="gap: 10vh;", the default small si ...