javascript - 调整图像幻灯片大小时 Mozilla Firefox 内存泄漏

Question

我正在开发一个网站，该网站需要带有淡入淡出图像的简单幻灯片。可以在此处找到提取的部分:https://jsfiddle.net/musicyeo/qaLhsr6t/18/

错误重现步骤:快速来回调整浏览器(因此图像)的大小几次。Firefox 的内存使用量开始攀升，直到 1.5 GB 到 2 GB，直到一些图像消失。控制台日志:图像损坏或 chop 。关闭浏览器后，进程悬空。

在错误出现之前，例如，在低于 1 GB 左右时，浏览器的一次性调整大小会将内存使用量降低并稳定到大约 600+ MB 左右。

受影响的浏览器: Mozilla Firefox 最新版本(32 位和 64 位)。

工作浏览器:Chrome 和 IE 工作正常，没有这个问题。内存消耗相对较低且稳定。

似乎喜欢 Firefox 为每个图像创建并在 RAM 中存储多个副本，在调整大小期间可能具有不同的尺寸，并且“临时副本”不会发布。或者，如果我没有以正确的方式实现幻灯片放映，请赐教。

谢谢!

HTML:

<div id="mainWrapper">
<div class="heroImg">
    <img class="resizable" src="https://static.pexels.com/photos/25945/pexels-photo-25945.jpg">
    <img class="resizable" src="https://static.pexels.com/photos/33092/domestic-cat-cat-adidas-relaxed.jpg">
    <img class="resizable" src="https://static.pexels.com/photos/26919/pexels-photo-26919.jpg">
    <img class="resizable" src="https://static.pexels.com/photos/106343/pexels-photo-106343.jpeg">
    <img class="resizable" src="https://static.pexels.com/photos/29013/pexels-photo-29013.jpg">
    <img class="resizable" src="https://static.pexels.com/photos/26880/pexels-photo-26880.jpg">
    <img class="resizable" src="https://static.pexels.com/photos/106606/pexels-photo-106606.jpeg">
    <img class="resizable" src="https://static.pexels.com/photos/105987/pexels-photo-105987.jpeg">
</div>

CSS:

#mainWrapper { max-width: 996px; }

.heroImg {
    display: block;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.heroImg img {
    display: block;
    position: absolute;
    opacity: 0;
    z-index: 1;
}

Javascript:

 $(document).ready(function() {
    // Set the first image and fade it in
    $('.heroImg img:first-child').animate({opacity: 1.0}).addClass('frontImg');
    setInterval('showNext()', 2000);
});

function showNext() {
    var current = $('.heroImg img.frontImg');
    if (typeof current === undefined || current === null)
        current = $('.heroImg img:first-child');

    // Only transit image if current item is not animating
    if (current.queue('fx').length === 0) {

        // Get the next(wrapped-around) image
        var next = current.next();
        if (current.is('.heroImg img:last-child'))
            next = $('.heroImg img:first-child');

        // Fade in next image. Class frontImg has large z-index set in CSS.
        next.css({opacity: 0.0}).addClass('frontImg').animate({opacity: 1.0}, 1000);

        // Fade out current image
        current.animate({opacity: 0.0}, 1000).removeClass('frontImg');
    }
}

Answer 1

我有同样的问题，但在 Firefox 中更改图像的宽度和高度属性。仍然无法解决。

但可以尝试使用转换事件进行转换以在完成时捕获。