CODEWITHSUNDEEP
javascriptvue.js
Msw Tm
Msw Tm

Reputation: 508

Load the image even if the component is not rendered

I have a web application developed in Vue.js, which has a side navigation menu component. This component has a conditional rendering to display only when needed. Inside the component there is an image to display close button for the side menu.

<transition name="fade">
  <div
    v-if="side_menu_is_open"
    ...
  >
    <div
      ...
    >
        <div class="mt-3 p-2" @click="toggleSideMenu">
          <img :src="require('../assets/icons/cancel.svg')" class="w-8">
        </div>

      <ul class="mt-4">
        ...
      </ul>
    </div>
  </div>
</transition>

All this is working fine. However, on the first render/display of the side menu component, the image takes a moment to load the file. Is there anyway to load the image for conditional rendering even if the component is not loaded?

Upvotes: 0

Views: 431

Answers (2)

mbleyen
mbleyen

Reputation: 51

You can preload that image in your created() method. This will make sure the browser has loaded the image when it is needed.

var img = new Image();
img.src = '../assets/icons/cancel.svg';

Or instead of using an <img /> tag you could use inline svg directly in your html.

Upvotes: 1

Manas Gond
Manas Gond

Reputation: 666

The close button should not be part of the condition rendering.

Like

<div flex direction: row, flex:1>
  <div flex-direction:column flex:0.90>
  {
  //contion rendering
  }
  </div>
  <img src={closeIcon} flex:0.10/>

</div>

Upvotes: 0

Related Questions