Question

我正在开发一个需要简单幻灯片放映并且图像交叉淡入淡出的网站。提取的部分可以在这里找到：https://jsfiddle.net/musicyeo/qaLhsr6t/18/

Bug Repro步骤： 快速调整浏览器（因此图像）的速度几次。 Firefox的内存使用率开始攀升至1.5 GB至2 GB，直到某些图像消失。控制台日志：图像损坏被截断。关闭浏览器后，进程正在悬空。

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

受影响的浏览器： Mozilla Firefox最新版本（32位和64位）。

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

似乎喜欢Firefox在RAM中为每个图像创建和存储多个副本，在调整大小期间可能具有不同的维度，以及＆＃34;临时的＆＃34;没有被释放。或者，如果我没有以正确的方式实现幻灯片，请赐教。

谢谢！

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中更改了图像的宽度和高度属性。而且仍然无法解决这个问题。

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

调整图像幻灯片放大时，Mozilla Firefox内存泄漏

1 个答案: