1

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?

Improve this question
1
  • Why so complicated? Simple create <img> tags inside <div style="display:none">. Commented Nov 22, 2018 at 13:19

4 Answers 4

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

2 Comments

Is there a way to check when an image finished loading? So you can fire an event just after completion?
@Matt check out this: stackoverflow.com/questions/20613984/…
0

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

  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.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; }

Improve this answer

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.