CODEWITHSUNDEEP
htmlcss
user16542536
user16542536

Reputation: 79

Preload Images for Html pages

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

Upvotes: 0

Views: 2488

Answers (1)

Mohammed Sobhi
Mohammed Sobhi

Reputation: 181

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>

Upvotes: 3

Related Questions