Image slider – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahojte, mám taký problém. Mám vytvorený image slider no ked prepínam medzi stránkami a vrátim sa po chvíli tak mi bugne. Bude lepšie ak to uvidíte na vlastné oči. Netuším čo za tým môže byť. Tu je kód:

HTML

<div id="banner">
                <div id="one" class="cover"></div>
                <div id="two" class="cover"></div>
                <div id="three" class="cover"></div>
                <div id="four" class="cover"></div>
                <div id="five" class="cover"></div>
            </div>

CSS 

#banner {
    position: relative;
    max-width: 100%;
    min-height: 25em;
    background-color: #aaa;
}

.cover {
    width: 100%;
    min-height: 25em;
    position: absolute;
    left: 0;
    top: 0;
}

#one,
#two,
#three,
#four,
#five {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /*background-attachment: fixed;*/
}

#one {
    background-image: url('../img/pictures/british-airways-2132653_1920.jpg');
}

#two {
    background-image: url('../img/pictures/earth-11595_1920.jpg');
}

#three {
    background-image: url('../img/pictures/norway-2083189_1920.jpg');
}

#four {
    background-image: url('../img/pictures/travel-1756150_1920.jpg');
}

#five {
    background-image: url('../img/pictures/road-2068900_1920.jpg');
}

JS

covers  = $('#banner');
    
    covers.children(':not(:last)').hide();

    setInterval(function() {
        covers.children(':last')
        .fadeOut(2500, function() { $(this).prependTo( covers ); })
        .prev().fadeIn(2500);
    }, 4000);

Link ku stránke:

http://erasmus.studenthosting.sk/Erasmus/index.php

Ve FF mi to funguje normalne, ani v JS konzoli to nevypise chybu. Jenom pinda, ze pouzivas zastarale mutation events.
Pokud pouzivas chrome, tak to prosim te odinstaluj, na ten se neda spolehnout, ze se bude chovat spravne nebo najdi jiny kod pro efekt.

#1 jordi1811
Ako sa prejavuje ten bug? Skúsil by som upraviť ten setInterval. Dal by som ho do premennej a vždy pred jeho volaním by som zavolal clearInterval.

var myInterval; // toto presuň niekde do globálneho Scope.

clearInterval(myInterval);
myInterval = setInterval(function () {
    covers.children(':last')
        .fadeOut(2500, function () {
            $(this).prependTo(covers);
        })
        .prev().fadeIn(2500);
}, 4000);

Tie mutation events čo ukazuje to je z pluginu. Bug sa prejavuje tak, že ked si otvoríš tú stránku čo som sem prihodil link tak ju nechaj tak a choď na iné stránky popozerať a sem tam keď sa vrátim zbadáš, že miesto obrázku zostane len biely background. Hej riešenie je, že to spravím napríklad cez plugin nejaký alebo úplne inak ale zaujíma ma prečo toto blbne takto hlavne. Keď už tu nenájdem odpoveď tak to prerobím inak.

Ze tam je bily background by mne az tak netrapilo, pokud to pak naskoci. To je nejspis zpusobeno prohlizecem, ktery se snazi setrit pamet / procesor a tak script zastavi nebo omezi, kdyz to okno nemas aktivni.