I just created my first website page with a few background images that crossfade.
However, I am experiencing an issue where the next background image takes some time to load during the crossfading effect if the page is not cached on the user's computer initially.
Does anyone have any ideas on how to preload all the images at once?
JSFiddle: https://jsfiddle.net/sawqo6j9/
var i=0;
var imghead=[
"url(http://www.psdgraphics.com/file/abstract-mosaic-background.png)",
"url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg)",
"url(http://www.mrwallpaper.com/wallpapers/gradient-background.jpg)"
];
function slideimg() {
setTimeout(function () {
jQuery('body').css('background-image', imghead[i]);
i++;
if(i==imghead.length) i=0;
slideimg();
}, 6000);
}
slideimg();html, body {
height: 100%;
}
body {
background: url(http://www.psdgraphics.com/file/abstract-mosaic-background.png) no-repeat center center fixed;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
-ms-transition: all 2s ease-in;
transition: all 2s ease-in;
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
color: #fff;
margin: 100px;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>There goes page content</p>
</body>
</html>