I figured out a way to preload images in html and css. I have used this for stuff like buttons that have multiple different images (for when it is clicked vs not being clicked). A lot of the time, you will click on the button then it will take a second to load the background.
How to do it:
In your html, create a
with the class of hidden.Put img tags with the srcs of all of the images you want to load within that .
For example:
<div class="hidden">
<img src="images/open_button_click.jpg" alt="">
</div>
The CSS:
Paste this into your CSS:
.hidden {
position:fixed;
bottom:0px;
left:0px;
pointer-events: none;
opacity:0%;
}
What this does is hide the elements visually then makes it so they don't affect anything else on your page.
That's all I wanted to keep this simple.
Top comments (0)