gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:24:42 25 4
gpt4 key购买 nike

这里是 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,并直接设置图像标签的来源。

任何有关此问题的帮助或对代码本身的评论将不胜感激!

最佳答案

这是 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
}

关于javascript - 更改图像时简单幻灯片代码的内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29818554/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com