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('')");
  }

  if (i == 1) {
    $(".myimage").css("background-image", "url('')");
  }

  if (i == 2) {
    $(".myimage").css("background-image", "url('')");
  }

  if (i == 3) {
    $(".myimage").css("background-image", "url('')");
  }

  i++;

}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('');
  background-size: cover;
}

<script src=".1.1/jquery.min.js"></script>
<div class="myimage">
</div>

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./1640/1480/any')");
  }

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

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

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

  i++;

}, duration + delay)

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

<script src="https://ajax.googleapis./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?

• javascript
• jquery

• Why so plicated? Simple create <img> tags inside <div style="display:none">. – Martin Heralecký Commented Nov 22, 2018 at 13:19

4 Answers 4

You could preload them using CSS like:

body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(https://placeimg./1640/1480/any) url(https://placeimg./1640/1481/any) url(https://placeimg./1640/1482/any) url(https://placeimg./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./1640/1480/any', 'https://placeimg./1640/1481/any', 'https://placeimg./1640/1482/any', 'https://placeimg./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./1648/1488/any');
  background-size: cover;
}

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

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

You can preload the images as followed

function preloadImages(){

var images = ["https://placeimg./1640/1480/any","https://placeimg./1640/1481/any","https://placeimg./1640/1482/any","https://placeimg./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./1640/1480/any')")

You use

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

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

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

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

1. the approach you are following (which is ok)

2. 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./1648/1480/any'); background-image: url('https://placeimg./1648/1481/any'); background-image: url('https://placeimg./1648/1482/any'); background-image: url('https://placeimg./1648/1483/any'); background-size: cover; }

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