Question

我有一个网络摄像头脚本，每隔10秒就通过FTP将JPG发送到我的网络服务器（覆盖原件）。

如何让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="" />');
                }
            });
        }

注意：如果我能提供帮助，我不想刷新页面。

Answer 1

一种肮脏的方式是在图像src的末尾附加时间戳或随机数，以防止缓存，如 img src =“image.jpg？random = [RANDOM]” 其中[RANDOM]是时间戳或随机数

Answer 2

看起来你有缓存问题 - 浏览器已经在缓存中有图像并且不再从服务器加载它。最简单的方法是添加随机参数，使浏览器认为它是另一个图像：

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

可以通过服务器端调整实现相同的效果，但这种方式可能是最不具侵入性且更容易实现的。

Answer 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);
});

Answer 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);

如果您的服务器在图片网址中支持额外参数，则会阻止缓存图片。

更新定期重新上传的图像

4 个答案: