macik,
вариант с предзагрузчиком от
Rise,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#foto_index{
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-o-transition:all 3s ease;
opacity: 1;
background: url("http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg") no-repeat center;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var mas = [
'http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg',
'http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg',
'http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg'
], i=1, a = performance.now();
function csaHead(b){
if(b - a > 5000) {
a = b;
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i = ++i % mas.length;
}
requestAnimationFrame(csaHead)
}
function preload(images, callback) {
if (images.length) {
var image = new Image();
image.onload = image.onerror = function() {
preload(images, callback);
}
image.src = images.pop();
} else {
callback();
}
}
preload(mas.slice(0), function(){ requestAnimationFrame(csaHead)});
});
</script>
</head>
<body>
<div id='foto_index'></div>
</body>
</html>