Question

我有一个asp.net网页。

我有一个javascript计时器。

我有一个html img标签。

我正在更新计时器中的图像src。

img src设置为ashx处理程序。

过了一会儿，在任务管理器中，我浏览器的内存会亮起来。

我想象一下，因为我没有正确处理图像。

当我处理图像并用新图像更新时，我会发出闪烁的声音。

如何正确处理我的位图而不造成任何错误？

谢谢，

我的代码：

这是在live.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标记页面中的javscript：

<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>

Answer 1

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

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);
    })();
  };
}();

演示：http://jsbin.com/alArahu/1/

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

1 个答案: