I am changing my background image from this code
jQuery(window).load(function(){
var images = ['blaa.jpg','sdsd.jpg'];
var i = 0;
setInterval(function(){
jQuery('#absolute-c').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
}, 3000);
})
how do .animate and load first background without delay. due to setInterval my first background also show after 3 sec
You can do create a function for this and use it in the setInterval:
jQuery(window).load(function(){
var images = ['blaa.jpg','sdsd.jpg'];
var i = 0;
function changeBackground() {
jQuery('#absolute-c').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
}
// Call it on the first time
changeBackground();
// Set an interval to continue
setInterval(changeBackground, 3000);
});
Another solution, and I think is much better, is to use setTimeout instead:
jQuery(window).load(function(){
var images = ['blaa.jpg','sdsd.jpg'];
var i = 0;
var timeoutVar;
function changeBackground() {
clearTimeout(timeoutVar); // just to be sure it will run only once at a time
jQuery('#absolute-c').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
// call the setTimeout every time to repeat the function
timeoutVar = setTimeout(changeBackground, 3000);
}
// Call it on the first time and it will repeat
changeBackground();
});
.delayoranimate