Ich entwickle eine Website, die einfache Diashow mit Überblendung von Bildern erfordert. Extrahiert Teile sind hier zu finden: https://jsfiddle.net/musicyeo/qaLhsr6t/18/Mozilla Firefox Speicherverlust bei der Größenänderung Bild Diashow
Bug Repro Schritte: den Browser Ändern der Größe (und damit die Bilder) zurück und nach vorne schnell ein paar Mal. Speicherverbrauch von Firefox beginnt zu steigen bis 1,5 GB auf 2 GB, bis einige Bilder verschwinden. Konsolenprotokoll: Das Image ist beschädigt oder abgeschnitten. Nach dem Schließen des Browsers wird der Prozess unterbrochen.
Bevor der Fehler auftritt, z. B. bei weniger als 1 GB oder so, verringert eine einmalige Größenänderung des Browsers und stabilisiert die Speicherauslastung auf ungefähr 600 MB oder so.
Betroffene Browser: Mozilla Firefox neueste Version (32 und 64 Bit).
Arbeitende Browser: Chrome und IE funktioniert gut ohne dieses Problem. Der Speicherverbrauch ist vergleichsweise gering und stabil.
Scheint wie Firefox erstellt und speichert im RAM mehrere Kopien für jedes Bild, möglicherweise mit unterschiedlichen Größen während der Größenänderung, und die "vorläufigen" sind nicht freigegeben. Oder wenn ich Slideshow nicht den richtigen Weg implementiere, erleuchte mich bitte.
Danke!
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');
}
}