Господа, есть такой простой слайдер. Как видно из примера фото не отображаются сразу. Как до запуска слайдера загрузить фотографии в кеш и брать их уже от туда?
Маленькое дополнение. Это могут быть не только фото... Например: видео, музыкальные файлы... И естественно не в слайдере, а где то еще... Меня интересует сама логика... Ну и маленький пример с кодом, чтобы было понятнее. Я хочу подобные файлы загружать заранее.
P.S. Тут мне уже ответили, но у меня на компьютере все ровно тормозит. И не понятно, что как и для чего...
var sliderFoto = [
'url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg)',
'url(http://ru.artsdot.com/ADC/Photos-ImgScreen.nsf/O/P-AC6V56/$FILE/Buildings-night_city_65_.Jpg)',
'url(https://cdn.wallaps.com/wallpapers/10000/2870.jpg)',
'url(http://on-desktop.com/wps/Nature_Beach_Bright_paints_of_coast_023115_.jpg)',
'url(http://wallpaperscraft.ru/image/ravnina_zelen_solnce_gory_derevya_trava_326_2560x1600.jpg)'
];
var sliderBox = document.getElementById('sliderBox');
sliderBox.style.backgroundImage = sliderFoto[4];
//sliderBox.style.backgroundSize = 'cover';
var count = 0;
(function() {
setInterval(function() {
if (count >= sliderFoto.length) {
count = 0;
}
sliderBox.style.backgroundImage = sliderFoto[count++];
}, 5000)
}())
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
color: white;
}
#wrapper {
width: 100%;
height: 100%;
}
#sliderBox {
position: relative;
top: 20px;
left: calc(50% - 175px);
width: 350px;
height: 230px;
background-size: cover;
transition: all .5s;
}
<div id="wrapper">
<div id="sliderBox">
</div>
</div>