0

I have an element on a webpage with a background image applied to it. There are six different images and I show each of them one by one. Currently, the first image is shown for four seconds and then the next one is shown for four seconds and so on.

The problem I am facing is that I can't control the order in which the images are downloaded. While the browser is showing the first image, I want it to prioritize the downloading of second image in the slideshow. When the browser is showing second image, I want it to prioritize the downloading of third image. This way the users won't see a flash when the images change.

At present it seems like the browser is downloading images in random order. Here is my CSS:

@keyframes slideshow {
  0% {
    background: url('1.jpg');
  }
  4% {
    background: url('1.jpg');
  }
  6% {
    background: url('2.jpg');
  }
  14% {
    background: url('2.jpg');
  }
  .... and so on.
}

Is there any way for me to force the browser to download image 2.jpg while I am showing 1.jpg in the background?

Thanks.

Neena Vivek
  • 667
  • 7
  • 19
  • Why not just load these images in hidden elements (or A hidden element, that is created before the image is loaded) ? A DOM Element with `display:none` for instance, is still there - if an image is loaded into this element it won't be shown, but it will be loaded by the browser. What this means for your question is that you might want to think about a JS/JQuery implementation, I'm not sure loading things this way would affect the way it's displayed in CSS the way you're doing it. – Wep0n May 23 '17 at 08:02
  • @Wep0n Are images loaded by the browser in the order in which they appear inside the `img` tag? – Neena Vivek May 23 '17 at 08:05
  • Try This : https://stackoverflow.com/questions/19071907/flexslider-lazyloading-only-load-an-image-when-its-truly-needed – Govind Samrow May 23 '17 at 08:09
  • Possible duplicate of [Flexslider lazyloading - only load an image when it's truly needed](https://stackoverflow.com/questions/19071907/flexslider-lazyloading-only-load-an-image-when-its-truly-needed) – Govind Samrow May 23 '17 at 08:10
  • 1
    just a sidenote, instead of repeating `background: url('2.jpg');` twice for the beginning and the end of each keyframe, you can mix them both in one line, like this `6%, 14% { background: url('2.jpg'); }` [**jsFiddle Demo**](https://jsfiddle.net/fn6x6827/) – Mi-Creativity May 23 '17 at 08:49
  • @Neena Vivek That depends on your browser, I'd say most likely no. – Wep0n May 23 '17 at 10:08

1 Answers1

0

maybe you can use a displayed none img tag and load the elements you want ... what come to my mind is to add onchange event on slider each time it is changed you append the next img to body and give a diplay:none; in order not to show that will force the img to load before they are needed .

Fadi Abo Msalam
  • 6,739
  • 2
  • 20
  • 25
  • @Wep0n that what is almost what i suggested – Fadi Abo Msalam May 23 '17 at 07:59
  • Yeah, I didn't see that, I was writing it as an answer but figured it might be a better comment, I posted 7 seconds after you and accidentally commented on your answer instead of his question Edit: I moved my comment appropriately – Wep0n May 23 '17 at 08:01