更改图像时使用简单的幻灯片代码进行内存泄漏

Question

JavaScript 的初学者。我制作了一个简单的幻灯片脚本，它通过更改 imgcontainer div 上背景图像的 CSS 来发挥作用。下面是我的代码和 HTML.

的简化版本

<!DOCTYPE html>
<html lang="en">
    <body>
        <div id="imgcontainer" style="background-image: url(img/slider/image1.jpg); width: 500px; height: 500px;">
        </div>
        <button id="previmg" onclick="changePage(1)">Prev img</button>
        <button id="nextimg" onclick="changePage(0)">Next img</button>
    </body>
    <script type="text/javascript">
        var element = document.getElementById("imgcontainer");

        var timer = setTimeout(autoPage, 5000);

        var images = ["img/slider/image1.jpg","img/slider/image2.jpg","img/slider/image3.jpg","img/slider/image4.jpg","img/slider/image5.jpg","img/slider/image6.jpg","img/    slider/image7.jpg","img/slider/image8.jpg"];
        var currentImage = 1;

        function autoPage() {
            if (currentImage === images.length) {
                element.style.backgroundImage = "url(" + images[0] + ")";
                currentImage = 1;
            } else {
                element.style.backgroundImage = "url(" + images[currentImage] + ")";
                currentImage ++;
            }

            timer = setTimeout(autoPage, 5000);
            console.log("image autopaged to page " + currentImage + ", image src now: "  + images[currentImage - 1]);
        }

        function changePage(i) {
            clearTimeout(timer);

            if (i === 0) {
                if (currentImage === images.length) {
                    element.style.backgroundImage = "url(" + images[0] + ")";
                    currentImage = 1;
                } else {
                    element.style.backgroundImage = "url(" + images[currentImage] + ")";
                    currentImage ++;
                }
            } else if (i === 1) {
                if (currentImage === 1) {
                    element.style.backgroundImage = "url(" + images[images.length - 1] + ")";
                    currentImage = images.length;
                } else {
                    element.style.backgroundImage = "url(" + images[currentImage - 2] + ")";
                    currentImage --;
                }
            }

            timer = setTimeout(autoPage, 5000);
            console.log("image paged to page " + currentImage + ", image src now: " + images[currentImage - 1]);
        }
    </script>
</html>

幻灯片本身似乎运行良好...除了它在 Chrome 中存在的巨大内存泄漏。每次图像更改时，选项卡内存使用量都会大量增加，有时是 10mb，有时是 50mb。这种趋势一直持续到内存使用量似乎在某个特定点达到上限。

Firefox 似乎没有表现出这种行为，而是在完全没有内存问题的情况下循环浏览图像。

这是我编码中的一些弱点，还是 Chrome 问题？我试过设置背景图片 CSS 和直接设置图片标签的来源。

非常感谢对此问题的任何帮助或对代码本身的评论！

Answer 1

这是一个 Chrome 的东西，它设置背景图像并将旧图像保存在缓存中以供重复使用。但是：当加载之前显示的图像时，内存不应增加。

我觉得你的代码没问题。

就我个人而言，我希望这略有不同。如果你想为此使用 javascript ，可以通过以下方式更方便地进行：对于您要展示的每张图片：创建一张图片（如下所示：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image）

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';

然后在循环中，告诉另一个函数将图像设置为当前想要的图像：

function SetImage(wantedUrl){
 // here put the image inside the div
}

更改图像时使用简单的幻灯片代码进行内存泄漏

Memory leak with simple slideshow code when changing image

javascript

google-chrome

memory-leaks