i've seen lot of similar questions couldn't find resolution. have bootstrap jumbotron , set of 3 images cycle through every 10 seconds. problem first url doesn't show until first 10 seconds has passed. after array finishes images play correctly, it's on first load image blank. i've tried setting background-image via css , jquery, still encountered issues skipping when loading first image.
the code
var jumbotronbg = ['/image1.jpg', '/image2.jpg', '/image3.jpg']; var changeimage = $(".jumbotron"); var = 0; setinterval(function() { changeimage.css({'background-image': 'url(' + jumbotronbg[i] + ")"}); = + 1; if (i == jumbotronbg.length) { = 0; } }, 10000);<div class="jumbotron"> </div>just need find way cycle 3 images fist being image1.jpg when page loads.
i don't see wrong except not calling background-image change on load? changed javascript code fix this:
var jumbotronbg = ['https://placehold.it/100x100', 'https://placehold.it/200x200', 'https://placehold.it/300x300']; var changeimage = $(".jumbotron"); var = 0; function cycleimage() { changeimage.css({ 'background-image': 'url(' + jumbotronbg[i] + ")" }); = + 1; if (i == jumbotronbg.length) { = 0; } } setinterval(cycleimage, 1000); cycleimage(); this jsfiddle works intended right?
