Я пытаюсь автоматически показывать изображения в зависимости от того, какой месяц в javascript.Я также использую плагин цикла jquery для показа слайдов.Первоначально у меня были только изображения в HTML, и все было на одном уровне.Теперь при загрузке источника изображений с помощью javascript возникает долгая пауза, прежде чем загружается первое изображение, а также после того, как одно изображение исчезает, а другое появляется. Когда я изначально запустил слайд-шоу, мне пришлось возиться с настройками, чтобы сохранить егоот того, чтобы иметь подобные длинные паузы.Мне интересно, если javascript мешает настройкам плагинов цикла (или что-то еще), и есть ли лучший способ сделать это (jquery или если мой js просто чокнутый).На клиентском сервере нет PHP, так что это не вариант.
Заранее спасибо!Будьте здоровы!
Вызывает функцию в следующем ниже внешнем js-файле из файла .html:
<div class="slideshow">
<script type="text/javascript">
retrievePictures();
</script>
</div>
Внешний js-файл:
function retrievePictures(){
var currentMonth = new Date();
if(currentMonth >= 11 || currentMonth <=4){
//winter
var html = '<img src="images/slider/shuksanWinter.jpg" width="600" height="400" alt="Mt Shuksan in winter" /> <br /><img src="images/slider/breakfastEveryone.jpg" alt="Breakfast" width="600" height="400" /> <br /><img src="images/slider/snowCamp.jpg" width="600" height="400" alt="Snow Camp" /> <br /><img src="images/slider/treesShoer.jpg" width="600" height="400" alt="Snow Shoers in Trees" /> <br /><img src="images/slider/bellRingingSliderLessNoise.jpg" alt="Ringing the bell for breakfast" width="600" height="400" /> <br /><img src="images/slider/poles.jpg" width="600" height="400" alt="Snow Shoeing Poles" /> <br /><img src="images/slider/games.jpg" alt="Game shelves" width="600" height="400" /> <br /><img src="images/slider/tableAbove.jpg" alt="Table setting" width="600" height="400" /> <br /><img src="images/slider/personSlider.jpg" alt="Meal preparation conversation" width="600" height="400" /> <br /><img src="images/slider/kitchenEmpty.jpg" alt="Empty kitchen" width="600" height="400" /> <br />';
document.write(html);
}
else{
//summer
var html = '<img src="images/slider/breakfastEveryone.jpg" alt="Breakfast" width="600" height="400" /> <br /><img src="images/slider/backYardViewPanorama2Slider.jpg" alt="The backyard view" width="600" height="400" /> <br /><img src="images/slider/bellRingingSliderLessNoise.jpg" alt="Ringing the bell for breakfast" width="600" height="400" /> <br /><img src="images/slider/boardWalkSlider.jpg" alt="Picture Lake boardwalk" width="600" height="400" /> <br /><img src="images/slider/bootWallSlider.jpg" alt="Downstairs bootwall" width="600" height="400" /> <br /><img src="images/slider/breakfastCommenceSliderLessNoise.jpg" alt="Dinning room" width="600" height="400" /> <br /><img src="images/slider/breakfastTalk.jpg" alt="Dinning room talk" width="600" height="400" /> <br /><img src="images/slider/bunksDoorways.jpg" alt="Sleeping room doorways" width="600" height="400" /> <br /><img src="images/slider/couple.jpg" alt="Mountaineers!" width="600" height="400" /> <br /><img src="images/slider/dewyGrassSlider.jpg" alt="Morning grass" width="600" height="400" /> <br /><img src="images/slider/dinningViewZoomHighPassVivid.jpg" alt="View from the dinning room" width="600" height="400" /> <br /> <img src="images/slider/games.jpg" alt="Game shelves" width="600" height="400" /> <br /><img src="images/slider/kitchenEmpty.jpg" alt="Empty kitchen" width="600" height="400" /> <br /><img src="images/slider/lodgeLightsMediumHighPassVividLessNoise.jpg" alt="Morning lights at the lodge" width="600" height="400" /> <br /><img src="images/slider/pancakeMakersLessNoise.jpg" alt="Pancake makers" width="600" height="400" /> <br /><img src="images/slider/personSlider.jpg" alt="Meal preparation conversation" width="600" height="400" /> <br /><img src="images/slider/pancakePourLessNoise.jpg" alt="Pouring batter" width="600" height="400" /> <br /><img src="images/slider/pictureLakeSlider.jpg" alt="Picture Lake" width="600" height="400" /> <br /><img src="images/slider/saltSyrupBowlsBrighterLessNoise.jpg" alt="Meal shelves" width="600" height="400" /> <br /><img src="images/slider/wetLandsLessNoise.jpg" alt="Picture Lake" width="600" height="400" /> <br /><img src="images/slider/tableAbove.jpg" alt="Table setting" width="600" height="400" /> <br /><img src="images/slider/windowSillouetteSliderMoreWindowLessNoise.jpg" alt="A view while eating" width="600" height="400" /> <br />';
document.write(html);
}
}