如何清理已从DOM移除的HTML img标签的流连接？

核心问题原因 #

直接通过innerHTML = ""移除img节点时，浏览器不会主动终止img正在加载的视频流连接（尤其是MJPEG这类持续流），导致连接被占用，新流因浏览器并发连接上限（通常6个）无法加载。

解决方案 #

在移除img节点前，主动清空img的src属性，让浏览器终止对应的流连接，再移除节点。具体步骤：

• 遍历容器内的所有img元素
• 将每个img的src设置为""或about:blank
• 再清空容器或移除节点

修改后的代码示例 #

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div class="container">
        <div class="navbar">
            <button id="next-streams-button">Go to next streams</button>
        </div>
        <div id="main-container">

        </div>

    </div>

    <script>
        var i = 0
        var streamAmount = 6
        var streamSources = [
            '10.0.1.24',
            '10.0.1.11',
            '10.0.1.25',
            '10.0.1.18',
            '10.0.1.17',
            '10.0.1.19',
            '10.0.1.12',
            '10.0.1.11',
            '10.0.2.16',
            '10.0.3.16',
            '10.0.4.16',
            '10.0.5.16',
            '10.0.6.16',
            '10.0.7.16',
        ];

        let currentStreams = streamSources.slice(i, i + streamAmount)
        let mainContainer = document.getElementById('main-container')

        buildElements(currentStreams)

        let nextStreamsButton = document.getElementById('next-streams-button')
        nextStreamsButton.addEventListener('click', () => {
            // 先处理所有img，终止流连接
            const imgs = mainContainer.querySelectorAll('img');
            imgs.forEach(img => {
                img.src = ''; // 清空src，触发连接终止
            });
            // 再清空容器
            mainContainer.innerHTML = "";
            i = i + streamAmount;
            let newStreams = streamSources.slice(i, i + streamAmount)
            buildElements(newStreams)
        })

        function buildElements(streams) {
            streams.forEach(s => {
                let imgEl = document.createElement('img')
                imgEl.setAttribute('src', "/" + s + "/stream")
                mainContainer.append(imgEl)
            })
        }
    </script>
</body>

</html>

额外优化建议 #

• 如果流是MJPEG格式，部分浏览器可能需要额外监听error事件确保连接完全释放，但上述方法已能覆盖大部分场景。
• 可以维护一个当前img元素的数组，切换时直接遍历数组处理，比querySelectorAll更高效。

内容的提问来源于stack exchange，提问作者codeThinker123