I need help creating a dynamic background image that transitions smoothly every few seconds. The current code I have doesn't include animation, and the images are taking too long to load. Is there a way to optimize the loading time?
Here's my existing code:
HTML:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(DSC_0007.jpg)'
, 'url(DSC_01110.jpg)'
, 'url(DSC_0277.jpg)'
, 'url(DSC_0050.jpg)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
</script>
CSS:
body{
background: url(DSC_0007.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
As a beginner in coding, any suggestions on how to improve this code would be greatly appreciated. Thank you!