0

I have a full background cover image for the home page in my project. I wonder is there a way to preload it somehow, so that it shows immediatly and not gradually like it is now. I have searched for the solutions but they are all mostly about preloading the images for the pages after the user is already on the website, I am wondering is there a way to somehow preload a cover image for the first page of the website?

This is what I have in the css file:

.section .image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  z-index: 2;
  position: absolute;
  display: block;
  background-image: url('/img/kid-cover.jpg');
  animation: zoom 7s;
  -webkit-animation-fill-mode: forwards;
}
Leff
  • 1,968
  • 24
  • 97
  • 201
  • I don't think so. – Satpal Dec 05 '16 at 09:26
  • Use the answer http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 –  Dec 05 '16 at 09:28
  • @WhiteHox that will not help in my scenario, it won't load the background cover image any faster on the home page – Leff Dec 05 '16 at 09:31
  • change image to base64, save it to localstorage and use it whenever needed. this way you can use the same image at multiple place and also render it faster. – binariedMe Dec 05 '16 at 09:34
  • Maybe use a loader until your image is loaded? – nashcheez Dec 05 '16 at 09:37
  • The workflow I would suggest is as follows: Correct image format > adjust size > compress (can be lossless) > make it progressive if it's a jpeg > convert to base64 > add it as inline style in the page html (unless it's used for more than one page, then add it to main CSS and make sure that's being cached) - Make sure you're using gzip –  Dec 05 '16 at 09:40

2 Answers2

0

You can get the image background with jquery in $(window).load. see Preloading CSS Images.

Then, you can show a splash screen before preload the image and hide this when the image has been loaded.

Hope this helps. regards

Community
  • 1
  • 1
Andrés Rondán Mulero
  • 370
  • 2
  • 10
0

What I think that you could do is use a time interval in Javascript and make it so that the rest of the page has to wait 1000 milliseconds(1 second) to load and the background image not have to wait any time.

ca1c
  • 1,111
  • 10
  • 23