html - हरण - वेब ब्राउज़र लिस्ट




ताज़ा फ़्लिकर के बिना एक ब्राउज़र में लगातार बदलती छवि फ़ाइल कैसे प्रदर्शित होगी? (2)

सबसे पहले, जब आप अपनी छवि ऑब्जेक्ट के src विशेषता को सेट करते हैं, तो छवि को अभी तक लोड नहीं किया गया है, जब आपको छवि का onload निकाल दिया जाता है (जब छवि लोड हो जाती है) तो आपको अपने कैनवास को रीफ़्रेश करना होगा।

दूसरे, ब्राउज़र कैश्ड छवि image.jpeg का उपयोग करने की कोशिश करता है उस से बचने के लिए, छवि यूआरआई के लिए फर्जी तर्क जोड़ें।

उदाहरण के लिए :

var timeoutPeriod = 1000;
var imageURI = 'image.jpeg';
var x=0, y=0;
var img = new Image();
img.onload = function() {
    var canvas = document.getElementById("x");
    var context = canvas.getContext("2d");

    context.drawImage(img, x, y);
    x+=20; y+=20;
    setTimeout(timedRefresh,timeoutPeriod);
};

function timedRefresh() {
    // just change src attribute, will always trigger the onload callback
    img.src = imageURI + '?d=' + Date.now();
}

और फिर इसे काम करना चाहिए

मैं एचटीएमएल का उपयोग कर ब्राउज़र पर एक छवि (फाइल से) प्रदर्शित कर रहा हूं ... मेरे पास एक और प्रोग्राम है जो मेरी स्क्रीन का स्क्रीनशॉट लेता है और इसे एक छवि फ़ाइल "image.jpeg" के रूप में संग्रहीत करता है। मैं समय समय पर setTimeout का उपयोग कर ब्राउज़र पर इस छवि को प्रदर्शित कर रहा हूं हालांकि ब्राउज़र पर छवि नहीं बदल रही है ..

यहां मेरा कोड है ... मैंने एक इमेज ऑब्जेक्ट का इस्तेमाल किया है ताकि जावास्क्रिप्ट फंक्शन में हर बार एक नई इमेज भरी जाती है, हालांकि यह काम नहीं करता है ...

<html>

<head>

<script type="text/JavaScript">

var x=0, y=0;
var canvas, context, img;

function timedRefresh(timeoutPeriod)
{
    canvas = document.getElementById("x");
    context = canvas.getContext("2d");
    img = new Image();
    img.src = "image.jpeg";
    context.drawImage(img, x, y);
    x+=20; y+=20;
    //img.destroy();
    setTimeout("timedRefresh(1000)",timeoutPeriod);
}

</script>

<title>JavaScript Refresh Example</title>

</head>

<body onload="JavaScript:timedRefresh(1000);">

<canvas id="x" width="600" height="600" />

</body>
</html>

मुझे लगता है कि आपको समय-समय पर timedRefresh() में छवि ऑब्जेक्ट बनाने की आवश्यकता नहीं है timedRefresh() । बस एक उदाहरण बनाएँ और लगातार अपने src विशेषता को बदल दें। आपके कोड स्निपेट के मामले में, img को ग्लोबल वैरिएबल होना होगा।

मुख्य समस्या, हालांकि, यह है कि आप अभी भी ओपेरा में चंचल (लेकिन विभिन्न प्रकार के) देखेंगे देखें: ओपेरा के साथ जावास्क्रिप्ट में छवि स्रोत अपडेट





refresh