Периодически обновляя изображения на странице - PullRequest
Новая
       14

Периодически обновляя изображения на странице

3 голосов
/ 10 октября 2010

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

<div class='cameras'> 
    <div class='camera'> 
      <h4>Desk</h4> 
      <img height='240' src='http://somehost/cameras/cam0/lastsnap.jpg' width='320'> 
    </div> 
    <div class='camera'> 
      <h4>Main Room</h4> 
      <img height='240' src='http://somehost/cameras/cam1/lastsnap.jpg' width='320'> 
    </div> 
    <div class='camera'> 
      <h4>Studio</h4> 
      <img height='240' src='http://somehost/cameras/cam2/lastsnap.jpg' width='320'> 
    </div> 
  </div>

В идеале я бы хотел, чтобы эти вещи перезагружались каждые пару секунд с указанных URL-адресов без необходимости генерировать отдельные JS для каждой камеры.Я использую jQuery для нескольких других частей, так что придерживаться этого было бы замечательно - с другой стороны, простое решение JS тоже подойдет.

Любые идеи, StackOverflow JS Gods?

Ответы [ 4 ]

7 голосов
/ 10 октября 2010

Хорошо, решил это: 

function refreshCameras() {
  $('.camera img').attr('src', function(i, old) { return old.replace(/\?.+/,"?i=" + (Math.random()*1000)); });
  setTimeout(refreshCameras, 1000);
}
function refreshCamerasFirst() {
  $('.camera img').attr('src', function(i, old) { return old + "?i=" + (Math.random()*1000); });
  setTimeout(refreshCameras, 1000);
}
$(function() {
    setTimeout(refreshCamerasFirst, 1000);
});

Принимает все элементы img в классе «camera» и обновляет их каждую секунду с помощью очистки кэша с помощью случайного числа, добавляемого к URL-адресу, который изменяется при каждой перезагрузке без чрезмерного увеличения URL-адреса с использованием регулярного выражения для замены существующий номер.

1 голос
/ 10 октября 2010

Создание источников изображений для изображений [для регулярных интервалов времени] 

var img = []; //just an image source. you can write your own code for image source

img[0] ='http://site.com/pics/pic.jpg';
img[1] ='http://site.com/pics/pic1.jpg';
img[2] ='http://site.com/pics/pic2.jpg';
img[3] ='http://site.com/pics/pic3.jpg';

$(function() {
    $.each(img, function(i, val) {
        var images = new Image();
        images.src = val;    //preloading images for my example purpose
    });
    function reload() {
        $('img.alter').each(function() { //generate a url for  image source. 
            var src = img[Math.floor(Math.random() * img.length)];
            $(this).attr('src',src);
        });
    }   
    setInterval(reload , 5000)
});

Проверьте это здесь

PS : этот метод не требует перезагрузки всей страницы

0 голосов
/ 10 октября 2010

Если вы хотите обновить страницу в указанный промежуток времени, вы можете сделать это также в html

Добавьте этот тег к тегу заголовка вашей страницы 

<meta http-equiv="refresh" content="1">

здесь содержание - продолжительность в секундах Порекомендуйте это

http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm

0 голосов
/ 10 октября 2010

Попробуйте переписать метатег на своей странице как 

<meta http-equiv="Refresh" content="2; URL=yourpage.php">

Он отлично работает с текстом. Вывод с изображениями

...