Если вы просто меняете изображение, я бы посоветовал вообще не перезагружать страницу, а использовать какой-то javascript, чтобы просто изменить изображение. Это может быть то, что плагин цикла jquery делает для вас.
В любом случае, вот простой пример
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
function changeImage(){
document.getElementById('myImage').src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
setTimeout(changeImage, 5000);
};
setTimeout(changeImage, 5000);
</script>
Это меняет источник изображения каждые 5 секунд. К сожалению, браузер будет загружать изображение постепенно, поэтому вы получите «мерцание» (или, возможно, пробел) на несколько секунд, пока загружается новое изображение.
Чтобы обойти это, вы можете «предварительно загрузить» изображение. Это делается путем создания нового временного изображения, которое не отображается на экране. Как только это изображение загружается, вы устанавливаете реальное изображение в тот же источник, что и «предварительная загрузка», поэтому браузер извлекает изображение из своего кэша, и оно появляется мгновенно. Вы бы сделали это так:
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();
// when the fake image finishes loading, change the real image
function changeImage(){
document.getElementById('myImage').src = preloadImage.src;
setTimeout(preChangeImage, 5000);
};
preloadImage.onload = changeImage;
function preChangeImage(){
// tell our fake image to change it's source
preloadImage.src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
};
setTimeout(preChangeImage, 5000);
</script>
Это довольно сложно, но я оставлю это в качестве упражнения для читателя, чтобы собрать все кусочки вместе (и, надеюсь, сказать "АГА!"): -)