Обновление изображения, которое периодически загружается повторно

#javascript #jquery

Вопрос:

У меня есть скрипт веб-камеры, который отправляет JPG через FTP на мой веб-сервер каждые 10 секунд (перезаписывая оригинал).

Как я могу заставить jQuery обновить это изображение? Я пытался:

 window.onload = function() {
            $('body').prepend('<img id="cam" src="ww.jpg" alt="" />');
            setInterval(runAgain, 12500);
        };

        function runAgain() {
            $.ajax({
                url:'ww.jpg',
                cache:false,
                beforeSend:function() {
                    $('#cam').remove();
                },
                success:function() {
                    $('body').prepend('<img id="cam" src="ww.jpg" alt="" />');
                }
            });
        }

Примечание: Я не хочу обновлять страницу, если это в моих силах.

Ответ №1:

Грязным способом является добавление метки времени или случайного числа в конце src изображения, чтобы предотвратить кэширование, например, img src=»image.jpg?random=[RANDOM]», где [RANDOM] — это метка времени или случайное число

1. 1 Это не выглядит красиво (и это заставляет изображение перезагружаться каждый раз, независимо от того, изменилось оно или нет), но это работает.

2. Уродливый — да, рабочий — да. Проблем — нет .. 🙂 баллов и репутации вам!

Ответ №2:

Похоже, у вас проблема с кэшированием — браузер уже имеет изображение в кэше и не загружает его снова с сервера. Самый простой способ — добавить случайный параметр, который заставит браузер думать, что это другое изображение:

 ...
url:'ww.jpg?'   Math.random()
...

Можно достичь того же эффекта с помощью настроек на стороне сервера, но этот способ, вероятно, наименее навязчивый и проще в реализации.

Ответ №3:

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

 $(function() {
    var $img = $('<img>', {
        src:  'ww.jpg'
    }).appendTo(document.body);

    setInterval(function() {
        $img.attr('src', function(_, src) {
            return [src, '?', ~~(Math.random() * 40000)].join('');
        });
    }, 12500);
});

Ответ №4:

 function updateLogo() {
    var base_src = "http://www.google.com/logos/2011/graham11-hp-start.png";
    var logo = $('#logo');
    var timestamp = new Date().getTime();
    // uncomment the timestamp part if your server supports an extra parameter to prevent caching
    logo.attr('src', base_src);//   '?_ts='   timestamp);
};

setInterval(updateLogo, 1000);

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