使用jquery异步刷新图像

时间:2011-07-02 19:45:43

标签: jquery

我使用下面的脚本刷新网络摄像头图像。它每18秒刷新一次,8次刷新后它会停止刷新。我有一种感觉它没有正确取消它。因为一段时间后我看到加载标志变得乱七八糟。我的剧本有问题吗?

var count = 0;
function CamRefresh() {
    count++;
    if(count > 8) clearInterval(timeout);
    updatecam();
}
var timeout = setInterval(CamRefresh, 18000);

});

function updatecam() {
$('#loading').show('fast');
$('#activecam').attr('src', 'http://weeg.binaer.no/weeg_com/nesjordet.jpg?time='+Date());
$('#loading').hide('slow');
$('#currentswitch').hide(1500);
$('#dayswitch').show();
}

2 个答案:

答案 0 :(得分:1)

var timeout = setInterval("CamRefresh()", 18000);

我还怀疑额外的});可能会使您的count var不在全局范围内,这是setInterval寻找它的地方。确保count在全局范围内,或者您可以执行以下操作:

function CamRefresh() {
    if (!CamRefresh.count) CamRefresh.count = 0;
    CamRefresh.count++;
    if(CamRefresh.count > 8) clearInterval(timeout);
    updatecam();
}

答案 1 :(得分:1)

我怀疑如果上一个动画尚未完成,loading函数中updatecam()元素的动画会出现计时问题 - 我会在其中链接一个stop()。试试这个:

function updatecam() 
{
    $('#loading').show('fast');
    $('#activecam').attr('src', 'http://weeg.binaer.no/weeg_com/nesjordet.jpg?time='+Date());
    $('#loading').stop().hide('slow');
    $('#currentswitch').hide(1500);
    $('#dayswitch').show();
}

另请注意,仅设置src属性不会等到图像实际加载。为此,您可以使用加载函数放入一个钩子:

 $('#activecam').attr('src', 'http://weeg.binaer.no/weeg_com/nesjordet.jpg?time='+Date())
                .load(function()
                {
                  $('#loading').stop().hide('slow');
                  $('#currentswitch').hide(1500);
                  $('#dayswitch').show();    
                });