ऑटो अपडेट छवि

मेरे पास एक छवि है और मैं जावास्क्रिप्ट, jquery या AJAX का उपयोग कर इसे स्वचालित रूप से अपडेट करना चाहता हूं।ऑटो अपडेट छवि

अब तक मेरे पास निम्न कोड है।

<html> 

<head> 
<script language="JavaScript"><!-- 
    function refreshIt() { 
    if (!document.images) return; 
     document.images['myCam'].src = 'swt.png'; 
     setTimeout('refreshIt()',50); // refresh every 50ms 
} 
    //--></script> 
</head> 

<body onLoad=" setTimeout('refreshIt()',50)"> 

<img src="swt.png" name="myCam"> 

</body> 

</html>

मुझे लगता है कि यह काम नहीं कर रहा है क्योंकि ब्राउज़र छवि को कैश कर रहा है और यह छवि को सही ढंग से अपडेट नहीं कर रहा है।

क्या कोई मुझे एक कामकाजी उदाहरण प्रदान कर सकता है?

स्रोत

2011-12-10 glarkou

आप * सोचते हैं * यह काम नहीं कर रहा है ....? इसके बजाय क्या हो रहा है? –

एक सेकंड में 20 बार ताज़ा करें? मैं गलत हो सकता हूं लेकिन मुझे नहीं लगता कि ब्राउज़र में अच्छा काम कर रहा है? – Murph

पीएस आप भी एनएसी का उपयोग करते हैं: 'सेटटाइमआउट (रीफ्रेश करें, 50)', मुझे अच्छा लग रहा है। (लेकिन हाँ, 50 एमएस? थोड़ा अधिक अनुरोध नहीं?) –

यह चाल करेगा, लेकिन यह प्रदर्शन के रूप में एक दुःस्वप्न है।

<html> 
    <head> 
     <script language="JavaScript"> 
      function refreshIt(element) { 
       setTimeout(function() { 
        element.src = element.src.split('?')[0] + '?' + new Date().getTime(); 
        refreshIt(element); 
       }, 50); // refresh every 50ms 
      } 
     </script> 
    </head> 
    <body> 
     <img src="swt.png" name="myCam" onload="refreshIt(this)"> 
    </body> 
</html>

स्रोत

2011-12-10 21:21:54 benastan

बस प्रत्येक रीफ्रेश पर क्वेरी स्ट्रिंग में एक यादृच्छिक संख्या जोड़ें। यह ब्राउज़र को यह सोचने में चाल करेगा कि यह एक अलग संसाधन है, जबकि सर्वर एक ही तस्वीर की सेवा करेगा।

स्रोत

2011-12-10 21:11:17

और जब आप इसमें हों, तो 50 एमएस शायद ताज़ा अंतराल के रूप में बहुत अधिक बार होता है। – Jacob

आप छवि स्रोत को उसी स्ट्रिंग पर सेट कर रहे हैं। इससे छवि को रीफ्रेश नहीं किया जाएगा, ब्राउज़र सोचता है कि इसमें पहले से ही वह छवि है, और कोई अन्य अनुरोध जारी नहीं करेगा। हर बार जब आप रीफ्रेश करना चाहते हैं तो यादृच्छिक क्वेरी पैरामीटर जोड़ने का प्रयास करें - फिर ब्राउज़र को छवि को विभिन्न संसाधनों के रूप में देखना चाहिए।

document.images['myCam'].src = 'swt.png';

साथ:

स्रोत

2011-12-10 21:12:33 driis

इस लाइन की जगह

var date = new Date(); 
document.images['myCam'].src = 'swt.png?ts=' + date.getTime();

यह अलग लिंक हर बार और img का संचित संस्करण उपयोग नहीं किया जाएगा उत्पन्न होगा।

और प्रत्येक 50ms छवि को रीफ्रेश न करें। यह अक्सर रास्ता है।

स्रोत

2011-12-10 21:14:38 kubetz

प्रत्येक बार एक अलग छवि लोड करने और रीफ्रेश समय बढ़ाने के शीर्ष पर, आपको छवि को पूरी तरह से लोड होने के बाद setTimeout फिर से शुरू करना चाहिए।

function refreshIt() { 
    if (!document.images) return; 
     var img = new Image(); 
     img.src = 'swt.png'; // use a random image 

     img.addEventListener('load', function() { 
      // you should cache the image element 
      document.images['myCam'].src = this.src; 
      setTimeout(refreshIt, 50); // refresh every 50ms  
     }, false); 
    } 

}

स्रोत

2011-12-10 21:21:05 Trevor

इस धागे में समाधान काम करेंगे, लेकिन वे ब्राउज़र को प्रत्येक बार फ़ंक्शन चलाने के लिए छवि को डाउनलोड करने के लिए मजबूर करते हैं। यह वास्तव में डाउनलोड किए बिना एक नई छवि की जांच करेगा जब तक कोई नया उपलब्ध न हो। इष्टतम प्रदर्शन के लिए इस प्रक्रिया को एक वर्कर में विभाजित किया जाना चाहिए।

<html> 
<head> 
    <script language="JavaScript"> 
     var lastModified; 
     var reader; 
     var http; 

     function init() { 
      http = new XMLHttpRequest(); 
      http.onreadystatechange = function (e1) { 
       if (this.readyState == 4 && this.status == 200) { 
        reader = new FileReader(); 
        reader.onloadend = function (e2) { 
         if (this.readyState == 2) { 
          var dataUrl = this.result; 
          document.getElementById("image").src = dataUrl; 
         } 
        } 
        reader.readAsDataURL(new Blob([http.response], {type: http.getResponseHeader("Content-Type")})); 
       } 
      } 
      refresh(); 
     } 

     function refresh() { 
      http.open("GET", "http://" + window.location.hostname + "/current", true); 
      if (lastModified != null) http.setRequestHeader("If-Modified-Since", lastModified); 
      http.responseType = "blob"; 
      http.send(null); 
      if (http.getResponseHeader("Last-Modified") != null) lastModified = http.getResponseHeader("Last-Modified"); 
      setTimeout(refresh, 50); 
     } 
    </script> 
</head> 
<body onload="init()"> 
    <img id="image" src=""> 
</body> 
</html>

स्रोत

2015-03-07 02:18:03 thunderfroggum

ऑटो अपडेट छवि

उत्तर

संबंधित मुद्दे