Question

有人能够确定，如何阻止jQuery缓存它抓取的图像，并再次显示相同的图像？

基本上图像每5秒重新上传一次，因为它充当网络摄像头（如果您检查图像右下角的时间戳，您可以判断它是否已更新）

http://colourednoise.co.uk/scripts/index.htm

谢谢

（抱歉，我忘了点击粘贴代码）

$(function(){
$(document).ready(function() {
    var imgs = ['http://www.ramseycommunityradio.co.uk/images/webcam.jpg', 'http://www.ramseycommunityradio.co.uk/images/webcam.jpg']
    $("#webcam").attr('src', imgs[1]);
    var refreshId = setInterval(function() {
        $("#webcam").fadeOut("slow", function() {
            var $el = $(this);
            $el.attr('src', $.inArray($el.attr('src'), imgs) === 0 ? imgs[1] : imgs[0]);
            $el.fadeIn("slow");
        });
    }, 2000);
});

Answer 1

您可以尝试将更改的查询字符串附加到URL上，如果这确实是您的问题，这应该停止缓存。我在这里看到了这个时间戳：how to generate and append a random string using jquery

因此，每次生成图像时都会执行以下操作：

var qs = (new Date).getTime();
var url = 'http://www.example.com/images/myimage.jpg?' + qs;
$(el).attr('src',url);

Answer 2

您的代码：

var imgs = ['http://www.ramseycommunityradio.co.uk/images/webcam.jpg', 'http://www.ramseycommunityradio.co.uk/images/webcam.jpg']
    $("#webcam").attr('src', imgs[1]);
    var refreshId = setInterval(function() {
        $("#webcam").fadeOut("slow", function() {
            var $el = $(this);
            $el.attr('src', $.inArray($el.attr('src'), imgs) === 0 ? imgs[1] : imgs[0]); 
// this condition is redundant, it will ultimately give the same result always
// because imgs[0]==imgs[1]

            $el.fadeIn("slow");
        });
    }, 2000);

就JQuery而言，你是不更改SRC属性（JQuery对图像内容一无所知）。尝试在服务器端使用两个不同的名称，例如webcam0.jpg和webcam1.jpg，并在它们之间交替。

Answer 3

一个技巧是附加一个随机查询字符串URL，导致图像从服务器重新加载。代码可能是这样的：

setInterval(function() {
    var img = $("#img").get(0);
    img.src = img.src.replace(/\?.*/, "") + "?" + Math.random();
}, 5000);

jQuery不会加载更新的图像

3 个答案: