Preload Images for Html pages - html

Question

I am new to web design,
Current I am having an issue when loading few images, the background image is flickering, I assume it takes time to load from the server.
How can you preload backgound image for html?
I found few ways from others from seraching like:
<link rel="stylesheet" href="url.com/image/1251302.jpg" as="image">
I am not sure how to use this way, if I will use a image later for an html element, how to apply this reloaded image?
If this is not the best way, how to pre-load image correctly?
any help would be greatly appreciated!
Some example of my codes.
.bgimg-1 {
background-position: center;
background-size: cover;
background-image: url("image/1251302.jpg");
min-height: 100%;
}
later:
<header class="bgimg-1">

Answer 1

I am not sure that this is what you are asking about … But if you mean that you need to implement a pre-loader for your website to make suer that everything loaded before showing the user any content to prevent the flickering.
Here is how you can do it
HTML, CSS, and JS:
const preloader = document.querySelector("#preloader");
if (preloader) {
window.addEventListener("load", () => {
preloader.remove();
});
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #229727;
border-top-color: #fff;
border-bottom-color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="preloader"></div>