JQuery: setInterval

Я хочу сделать слайд-шоу на своем сайте, но проблема в том, что setInterval работает только один раз. Он загружает мой файл только один раз, а затем останавливается.

Вот код: main.html

<img src="images/ex/full.jpg" width="800" height="377" alt="">
<script>
    $(document).ready(function(){
        var refreshId = setInterval(function(){
            $('#center').load('images/gallery/best/rotate.php');
        }, 5000);
    });
</script>

rotate.php

<img src="images/gallery/best/random.php?".<?php echo rand(0,1000) ?>."" width="800" height="377" alt="">

random.php содержит код, который загружает случайное изображение из выбранной папки, он работает хорошо.

Забыл упомянуть, я тоже включил лайтбоксы. Может быть, они не работают вместе?

Руководитель:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="vendors/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="vendors/js/prototype.js"></script>
<script type="text/javascript" src="vendors/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="vendors/js/lightbox.js"></script>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<link rel="stylesheet" href="styles/lightbox.css" type="text/css" />

Спасибо.

Ответ 1

<script>
$(document).ready(function(){
    var refreshId = setInterval(function(){
    var r = (-0.5)+(Math.random()*(1000.99));
        $('#center').load('images/gallery/best/random.php?'+r);
    }, 5000);
});
</script>

Как насчет этого?

Изменить

Извините, я имел в виду, что вы должны просто рандомизировать фотографии в функции setInterval. Как показано выше. Вместо rotate.php; просто загрузите random.php.

Ответ 2

Развернув мой комментарий, если это проблема кэширования, вы можете обновить свой код с помощью

<script>
$(document).ready(function(){
    var refreshId = setInterval(function(){
        $('#center').load('images/gallery/best/rotate.php?' + new Date().getTime());
    }, 5000);
});
</script>

Это приведет к тому, что URL-адрес будет отличаться по каждому запросу и, следовательно, позволит избежать проблемы с кэшированием.

Ответ 3

Проблема не в setInterval, это кэширование изображения. Когда тег изображения загружен, он выглядит точно так же, как раньше. Браузер не загружает изображение снова, он просто использует тот, который уже загружен.

Если вы хотите снова загрузить изображение, измените свой rotate.php на включение счетчика или случайного числа в качестве параметра в URL-адресе, возвращая то, что, например, выглядит так:

<img src="images/gallery/best/random.php?98037465936" width="800" height="377" alt="">

Изменяя URL-адрес каждый раз, когда тег загружается, браузер должен каждый раз загружать новое изображение.

Ответ 4

Вероятно, проблема заключается в том, что браузер загрузил random.php в кеш. Я думаю, вам лучше дать каждому изображению собственный URL-адрес и использовать его. Тогда php-страница может представить только src:

var refreshId = setInterval(function () {
  $.get('random-src.php', function (result) {
    $('#center>img').attr('src') = result;
  },'text');
},5000);

Тогда random.php может возвращать img/img1.jpg, img/img2.jpg и т.д. в случайном порядке.

В качестве альтернативы вы можете вставить header("Cache-Control: no-cache, must-revalidate"); в начало вашего файла random.php, чтобы предотвратить кеширование браузера.