使用javascript动态刷新图像时内存泄漏

Question

使用javascript动态刷新图像时内存泄漏

Nic*_*ick 7 javascript browser memory image timer

我正试图摆脱浏览器中令人讨厌的内存泄漏.

这就是我想要做的:
- 我经常尝试使用javascript刷新HTML页面中的图像.
- 所有代码都应与Internet Explorer 6或更高版本以及Firefox兼容.

你可以在下面找到我的代码.

这就是我观察到的:每次轮询新图像时,浏览器似乎都会将前一个图像保留在其缓存中.因此,chrome9/Internet Explorer 6和8/Safari 5的内存使用率在时间上保持线性增长.当我向图像添加no-cache标头时,只有firefox(3.6)似乎表现正常.我已经将刷新率设置得相当高(10ms),以便快速查看内存增长情况.

我已经尝试过:
- 向禁用缓存的图像添加标头:仅适用于firefox
这是响应标头:

HTTP/1.1 200 OK日期:2011年2月14日星期一11:17:02 GMT服务器:Apache/2.2.9(Debian)PHP/5.2.6-1 + lenny9与Suhosin-Patch mod_python/3.3.1 Python/2.5. 2 X-Powered-By:PHP/5.2.6-1 + lenny9 Pragma:no-cache Cache-control:no-cache,no-store,must-revalidate,max-age = 1,max-stale = 0,post -check = 0,pre-check = 0,max-age = 0 Expires:Mon,14 Feb 2011 11:17:02 GMT Content-Length:358 Keep-Alive:timeout = 15,max = 100 Connection:Keep-Alive内容类型:image/png

- 通过POST方法以base64字符串格式请求图像(默认情况下POST请求不被缓存):没有区别 -
将设置变量之类的各种内容保持为null并调用clearInterval或类似方法.
- 每次我提出请求时,更改/不更改图像名称.
- 在iFrame中加载以下代码并每隔5秒刷新一次iFrame似乎会清理除IE6之外的所有浏览器中的内存,因此这不是一个解决方案.
- 许多其他似乎不起作用的东西.

我希望你们中任何一个聪明的家伙都能帮助我.我变得非常绝望=)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=-1, max-stale=0, post-check=0, pre-check=0">
    <meta http-equiv="expires" content="-1">
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #B0B9C0;
        }

        img {
            width: 167px;
            height: 125px;
            background-color: #B0B9C0;
            border: none;
        }
    </style>
    <script type="text/javascript">
        var previewUrl     = "http://nick-desktop/image/";
        var previewImage   = document.createElement("img");
        var previewTimeout = 10;
        var previewWidth   = 200;
        var previewHeight  = 80;
        var timerID = 0;

        function initialize() {
            if(previewTimeout==null || previewUrl == null || previewWidth==null || previewHeight==null) return;
            document.body.appendChild(previewImage);
            previewImage.src = previewUrl;
            previewImage.style.width = previewWidth+"px";
            previewImage.style.height = previewHeight+"px";
            timerID = setInterval(doPoll, previewTimeout);
        }

        function doPoll() {
            previewImage.src = previewUrl + new Date().getTime()+".png";
        }
    </script>
</head>
<body onload="initialize()">
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sam*_*iew 1

尝试这个：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, max-age=-1, max-stale=0, post-check=0, pre-check=0">
    <meta http-equiv="expires" content="-1">
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #B0B9C0;
        }

        img {
            width: 167px;
            height: 125px;
            background-color: #B0B9C0;
            border: none;
        }
    </style>
    <script type="text/javascript">
        var previewUrl     = "http://nick-desktop/image/";
        var previewTimeout = 10;
        var previewWidth   = 200;
        var previewHeight  = 80;
        var timeout;

        window.onload = function() {
            if(previewTimeout==null || previewUrl == null || previewWidth==null || previewHeight==null) return;
            doPoll();
        }

        function doPoll() {
            clearTimeout(timeout);
            document.body.innerHTML = "";
            var previewImage = null;

            previewImage = document.createElement("img");
            previewImage.style.width = previewWidth+"px";
            previewImage.style.height = previewHeight+"px";
            previewImage.onload = function() { timeout = setTimeout(doPoll, previewTimeout); };
            document.body.appendChild(previewImage);

            previewImage.src = previewUrl + "image.png?datetime=" + new Date().getTime();
        }
    </script>
</head>
<body>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	2190 次
最近记录：	6 年，7 月前