1

測試Chrome和FireFox。它刷新並重新下載圖像，但不知道除此之外它應該做什麼。

HTML

<!DOCTYPE html> 
<body> 
    <div id="graph" > 
     <object type="text/html" style="width:100%; height:100%; margin:1%;" data=""> 
     </object> 
    </div> 
</body>

的Javascript

$(document).ready(function() { 
    var graph = $('#graph'), 
     uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?', 
     params = { 
      width: 740, 
      height: 150, 
      colour: '#0055ff', 
      duration: '5minutes', 
      legend: 'Vibration measure 0 -> 1024 ', 
      title: 'Foosball Vibrations - 5 Minutes', 
      show_axis_labels: 'true', 
      detailed_grid: 'true', 
      scale: 'manual', 
      max: 75, 
      timezone: 'Mountain Time (US & Canada)' 
     }; 
    var updateGraph = function() { 
     var data = uri + $.param(params); 
     graph.empty(); 
     graph.append($('<object/>') 
        .prop({'type': 'text/html', data: data}) 
        .css({'width': '100%', 'height': '100%'})) 
    }; 
    updateGraph(); 
    setInterval (updateGraph, 1000); 
});

編輯 - 改變到圖像時，由非閃爍，不添加緩存（在IE10，鉻和Firefox測試）：http://jsfiddle.net/JAYDb/4/

HTML

<div id="graph" ></div>

CSS

#graph { 
    background-color:#C0C0C0; 
    margin: 0 auto; 
    min-height: 200px ; 
    min-width: 750px ; 
    display: inline-block; 
} 
#graphObject{ 
    display: block; 
    width: 100%; 
}

的Javascript

$(document).ready(function() { 
    var uri = 'https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?', 
     params = { 
      width: 740, 
      height: 150, 
      colour: '#0055ff', 
      duration: '5minutes', 
      legend: 'Vibration measure 0 -> 1024 ', 
      title: 'Foosball Vibrations - 5 Minutes', 
      show_axis_labels: 'true', 
      detailed_grid: 'true', 
      scale: 'manual', 
      max: 75, 
      timezone: 'Mountain Time (US & Canada)' 
     }; 
    var data = uri + $.param(params), 
     graph = $('#graph'), 
     obGraph = $('<img/>').prop({'id': 'graphObject'}); 
    var updateGraph = function() { 
     var date = new Date(), 
     src = data + '&' + date.getTime(); 
     obGraph.prop('src', ''); 
     obGraph.prop('src', src); 
    }; 
    graph.empty().append(obGraph); 
    updateGraph(); 
    setInterval (updateGraph, 1000); 
});

來源

2013-03-30 00:47:09 fyrye

+0

這正是我所期待的。非常感謝。在safari中也很棒。 – spuder

0

右括號缺失？

$(document).ready 
( function() 
    { 
    updateGraph; 
    setInterval (updateGraph, 2000); 
    } 
); // missing

你是jsfiddle不工作，因爲沒有選擇jQuery版本。我做了一個工作，例如：？

$(document).ready(function() { 
    alert("OK"); 
    updateGraph(); 
    window.setInterval(updateGraph, 5000); 
}); 

function updateGraph() { 
    //This line is not working!!!! 
    alert("ok"); 
    //$('graph').reload(); // unknown method? 
}

http://jsfiddle.net/mmGT9/4/

你是什麼意思與「$（ '曲線'）的重載（）;那是一個自定義函數

如果你？要重新加載「對象」，我會從HTML區域去除異物，只留下空白格，然後加上下面一行在你的JavaScript功能。

$("#graph").html('<object type="text/html" style="width:100%; height:100%; margin:1%; " data="https://api.cosm.com/v2/feeds/120687/datastreams/sensor_reading.png?width=740&height=150&colour=%230055ff&duration=5minutes&legend=Vibrations%20measure%20%200%20-%3E%201024&title=Foosball%20Vibrations%20-%205%20Minutes&stroke_size=4&show_axis_labels=true&detailed_grid=true&scale=manual&max=75&timezone=Mountain%20Time%20(US%20%26%20Canada)" ></object>');

這將設置objec t放入ID爲「graph」的元素中。 div內的現有內容將被覆蓋。該函數每隔n秒調用一次，並替換該對象，這會強制重新加載。你可以通過使用變量來更漂亮。

下面是一個例子：http://jsfiddle.net/mmGT9/5/

來源

2013-03-30 00:17:43

+0

您錯過了添加jQuery後保存小提琴。 –

+0

這不是問題的答案 –

0

jsFiddle

該工程..

我改變了你的object到img標籤

<img id='obj' style="width:100%; height:100%; margin:1%; " src=... 


$('document').ready(function() { 
    var i; 

     var src = $('#obj').prop('src'); 
    setInterval(function(){ 
     i++; 
     $('#obj').prop('src',src+"&"+i); 

    },5000); 
});

來源

2013-03-30 00:38:16

JQuery Reload到

回答

jsFiddle

JQuery Reload到

回答

jsFiddle

相關問題