2

When I click a pop-out menu in Bootstrap, it takes a couple seconds to open because it is full on .pngs inside of it. I have already tried using .svgs here instead, but they were a nightmare to render consistently.

What is the best way to have these .png files load on page-load, so that the opening of the pop-out menu is instantaneous? I currently have this at the bottom of the page, which does not make clicking the pop-out menu load any faster.

<div style="display: hidden">
    <img src="img1">
    <img src="img2">
    ... etc ...
</div>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
AlwaysQuestioning
  • 1,464
  • 4
  • 24
  • 48

1 Answers1

0

You can load the png files before they are used. This can be done in javascript or using jQuery when the page has finished loading by creating an img element for each png and setting the src property.

Once the images are downloaded, they will immediately available when the pop-up opens.

See this question.

Juan
  • 5,525
  • 2
  • 15
  • 26