Освежающее изображение с помощью JQuery или Javascript

Я пытаюсь обновить файл динамического изображения каждые 20 секунд, желательно с помощью JQuery/JS, но я открыт для любых предложений.Освежающее изображение с помощью JQuery или Javascript

Изображение представляет собой файл Twitch.tv .php, который динамически изменяется с ONLINE на OFFLINE в зависимости от того, транслируется ли сейчас стример или нет. Проблема в том, что изображения не обновляются иногда без обновления браузера, и иногда они вообще не будут обновляться до тех пор, пока я не очищу кеш.

Веб-сайт, на котором я пытаюсь это сделать, - http://www.team-omen.com/content.php Вы увидите в центре модуль под названием OmenTV, который имеет несколько из этих изображений, и я хотел бы, чтобы они автоматически обновлялись, поэтому пользователям не нужно обновлять на странице, чтобы узнать, начал ли трансляция стримера или нет.

Это из файла status.php, который определяет, какие .png для отображения ...

<?php 
header('content-type: image/png'); 

$stream = $_GET['stream']; 

$json_file = @file_get_contents("http://api.justin.tv/api/stream/list.json?channel={$stream}", 0, null, null); 
$json_array = json_decode($json_file, true); 

if ($json_array[0]['name'] == "live_user_{$stream}") { 
    echo file_get_contents("online.png"); 
}else{ 
    echo file_get_contents("offline.png"); 
} 

    ?>

А вот часть HTML-файла, который отображает изображения

<div align="center" id="streamers"> 
    <div id="omentoggle" class="streamer"> 
    Team Omen 
    <br /> 
    <img src="http://www.team-omen.com/status/streamstatus.php?stream=teamomen" class="status" id="status_teamomen" /> 
    </div> 
    <div id="briantitantoggle" class="streamer"> 
    BrianTitan 
    <br /> 
    <img src="http://www.team-omen.com/status/streamstatus.php?stream=o_briantitan" class="status" id="status_briantitan"/> 
    </div> 
    </div>

. .. и т. д.

Может ли кто-нибудь дать мне пример того, как заставить это работать, скажем, что у изображения есть идентификатор #status_teamomen?

Заранее спасибо

источник

2013-08-16 Tony G

Возможно посмотреть на этот вопрос: http://stackoverflow.com/q/126772/1618257 –

Вы можете использовать setInterval функцию JavaScript для обновления источника изображения периодически:

setInterval(function() { 
    var cache_buster = Math.random(); 
    document.getElementById("status_teamomen").src = "http://www.team-omen.com/status/streamstatus.php?stream=teamomen&cache_buster=" + cache_buster; 
}, 20000);

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

источник

2013-08-16 22:43:28 leepowers

'случайная()' не то же самое, как 'unique'. Если вы хотите что-то, что всегда будет отличаться, используйте временную метку. Больше никогда не будет еще 5:52 PM Aug, 16, 2013. –

Временная метка определенно более надежная. Хотя случайная() величина должна быть «достаточно уникальной» для этой ситуации. – leepowers

Спасибо, что сделал трюк! Большое значение имеет –

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

Смотрите ответ здесь: Multiple GD images per page

источник

2013-08-16 22:47:29 user2140283

Освежающее изображение с помощью JQuery или Javascript

ответ

Смежные вопросы