Javascript 使用计时器上的图像构建内存_Javascript

Javascript 使用计时器上的图像构建内存

javascript

Javascript 使用计时器上的图像构建内存,javascript,Javascript,我有一个asp.net网页我有一个javascript定时器我有一个html img标签我正在定时器内更新图像src img src设置为ashx处理程序过了一会儿，在任务管理器中，我的浏览器的内存迅速增加我想象它是因为我没有正确处理图像当我处理图像并用新的图像更新它时，我得到一个闪烁的图像如何正确处理位图而不引起任何泄漏谢谢我的代码：这是现场直播 using System; using System.Web; public class Live : IHttpHandle

我有一个asp.net网页

我有一个javascript定时器

我有一个html img标签

我正在定时器内更新图像src

img src设置为ashx处理程序

过了一会儿，在任务管理器中，我的浏览器的内存迅速增加

我想象它是因为我没有正确处理图像

当我处理图像并用新的图像更新它时，我得到一个闪烁的图像

如何正确处理位图而不引起任何泄漏

谢谢

我的代码：

这是现场直播

using System;
using System.Web;

public class Live : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/jpg";
        context.Response.BinaryWrite(Shared.CurrentFrameInBytes);
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

这是我的asp.net标记页中的脚本：

<body>
    <form id="form1" runat="server">
    <div>
        <img alt="" src="Portal/Live/Current.jpg" id="imgLive" name="imgLive" />
    </div>
    <div id="divImageCache1" style="width: 352px; height: 288px; display: none;">
        <img alt="" src="" id="imgCached" />
    </div>
    <input id="Button1" type="button" value="button" onclick="Play();"/>
    </form>
</body>
<script type="text/javascript">
   var timer2, intervalMS = 100

    function Play() {
        if (timer2) window.clearTimeout(timer2);
        swapImages();
    }

    function setImageSrc(src) {
        //imgLive.src = null; - if I uncomment this I get flickering    
        imgLive.src = src;
        timer2 = window.setTimeout(swapImages, intervalMS);
    }

    function swapImages() {
        var imgCached = new Image();
        imgCached.onload = function () {
            setImageSrc(imgCached.src);
        };
        imgCached.onerror = function () {
            //setImageSrc("Error.jpg");
        };
        imgCached.src = null;
        imgCached.src = 'http://aurl/Cloud/Live.ashx'; 

    }
</script>


变量时间2，间隔=100
函数播放（）{
if（timer2）窗口。clearTimeout（timer2）；
swapImages（）；
}
函数setImageSrc（src）{
//imgLive.src=null；-如果我取消对此的注释，就会出现闪烁
imgLive.src=src；
timer2=window.setTimeout（交换时间、间隔）；
}
函数swapImages（）{
var imgCached=新图像（）；
imgCached.onload=函数（）{
setImageSrc（imgCached.src）；
};
imgCached.onerror=函数（）{
//setImageSrc（“Error.jpg”）；
};
imgCached.src=null；
imgCached.src=http://aurl/Cloud/Live.ashx'; 
}

我建议重用图像，而不是不断创建新图像，例如：

var Play = function () {
  var
    timeout,
    delay = 100,
    live = document.getElementById('imgLive'),
    cache = new Image();

  cache.addEventListener('load', function () {
    live.src = this.src;
  }, false);

  return function Play() {
    clearTimeout(timeout);

    (function loop() {
      cache.src = null;
      cache.src = 'http://www.informedmotion.co.uk/Cloud/Live.ashx';

      timeout = setTimeout(loop, delay);
    })();
  };
}();

演示：

Hi，有个叫@Yoshi的人给出了正确的答案，但我无法将其标记为正确，因为他删除了它。如果你重新发帖，我会给你打勾：）我取消了我的答案。起初我把它取了下来，因为我不确定它是否有用。