Preload background images

Question

I am cycling through background images in javascript/jQuery like this...

var duration = 2500;
var delay = 500;
var i = 0;

setInterval(function() {

  if (i == 0) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");
  }

  if (i == 1) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");
  }

  if (i == 2) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");
  }

  if (i == 3) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");
  }

  i++;

}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?

Why so complicated? Simple create `` tags inside `
`.
– Martin Heralecký Nov 22 '18 at 13:19 — Martin Heralecký, Nov 22 '18 at 13:19

Zakaria Acharki · Accepted Answer · 2018-11-22T13:54:38.600

You could preload them using CSS like:

body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

NOTE: You could use an array of images in the JS code and change them based on the index i.

var duration = 2500;
var delay = 500;
var i = 0;
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];

setInterval(function() {
  $(".myimage").css("background-image", "url(" + images[i] + ")");
  i++;
}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

score 2 · Answer 2 · edited Apr 02 '23 at 14:59

2

You can preload the images as followed

function preloadImages(){

var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
var preloadedImages = [];

for(i=0;i<images.length;i++){

  preloadedImages[i] = new Image();
  preloadedImages[i].src = images[i];
  console.log(preloadedImages[i].src)
}

}

preloadImages();

After the images are preloaded you can use your code and instead of

"url('https://placeimg.com/1640/1480/any')")

You use

"url("+preloadedImages1.src+")")

This should normally result in your images already being loaded and displaying correctly.

edited Apr 02 '23 at 14:59

Community

1
1

answered Nov 22 '18 at 14:02

mrdeadsven

744
1
9
22

Is there a way to check when an image finished loading? So you can fire an event just after completion? – Matt Jun 05 '20 at 16:27
@Matt check out this: https://stackoverflow.com/questions/20613984/jquery-or-javascript-check-if-image-loaded – mrdeadsven Jun 16 '20 at 06:53

Jins Peter · Answer 3 · 2018-11-22T13:36:12.860

0

Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,

make the image cycle using i= i==3?0:++i. Rather than just i++ Fiddle

edited Nov 22 '18 at 13:36

answered Nov 22 '18 at 13:25

Jins Peter

2,368
1
18
37

score 0 · Answer 4 · answered Nov 22 '18 at 13:31

For the first time, browser needs to download all the images, once downloaded, it'll load from cache.

So, flashes of no image will come every time whenever browser download file. you have two options

the approach you are following (which is ok)
Use CSS trick to load all at once by using following code

.myimage { height: 500px; width: 500px; transition: background-image 1s linear; background-image: url('https://placeimg.com/1648/1480/any'); background-image: url('https://placeimg.com/1648/1481/any'); background-image: url('https://placeimg.com/1648/1482/any'); background-image: url('https://placeimg.com/1648/1483/any'); background-size: cover; }

Preload background images

4 Answers4