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
}

更改图像时，内存泄漏，简单的幻灯片代码

1 个答案: