dziwny efekt w javascript

Question

Witam

Mam taki dziwny efekt w JS i nie wiem gdzie szukać błędu.

Otwieram sobie swoja stronkę ze sliderem (zmiana obrazka przy pomocy js):

wszystko jest ok do momentu gdy otworzę drugą zakładkę w przeglądarce

gdy poprzeglądam stronki i powrócę na stronkę ze sliderem to slider dziwnie miga (nie zmienia płynnie obrazka), gdy odświeżę stronkę to ten efekt mija i znowu jest wszystko ok.

<script>
window.onload = img_replace;

function img_replace()
	{
	var div = document.getElementById("div_ani");
	
	div.style.backgroundImage = "url('img/baner.png')";

	var interwal_id;
	z = 0;

	interwal_id = setInterval(function ()
                {

		//--- sciemnianie
		var interwal2_id;
		var i = 9;
		interwal2_id = setInterval(function ()
                	{
			div.style.opacity = "0." + i;
			i--;
			if(i <= -1 ) clearInterval(interwal2_id);
			}, 20);

		//--- zmiana pozycji tla
		setTimeout(function(){
			div.style.backgroundPosition = "0 " + z + "px";
 		}, 500);

		
		//--- rozjasnianie
		
		setTimeout(function(){
			var interwal3_id;
                	interwal3_id = setInterval(function ()
                        	{
                        	div.style.opacity = "0." + i;
                        	i++;
                        	if(i >= 10 ) clearInterval(interwal3_id);
                        	}, 20);
			}, 1000);
                z-=200;
		if (z <= -1400) z = 0; //--zerowanie licznika
                }, 10000);
	}

</script>

a to adres stronki:

http://sfagnieszka.eu/

EDIT

Zauważyłem, że efekt taki występuje tylko gdy obrazek się zmieni a ja mam akurat włączoną inną zakładkę

 

Answer 1

Czemu to nie jest pociągnięte na jednym setTimeout? Całość jest strasznie przekombinowana

Co do problemu: przeglądarka wstrzymuje wszystkie timery na stronie, która nie jest obecnie przeglądana. Być może w Twoim przypadku takie wstrzymanie i następnie wznowienie prowadzi do desynchronizacji tych timerów (bo na pewno będzie ich więcej niż jeden w ruchu), stąd takie miganie.

Moim zdaniem skrypt oparty tylko na jednym timerze działałby o wiele płynniej.

Comments

div.classList.toggle('div_ani_hidden');
div.style.backgroundPosition = "0 " + z + "px";
div.classList.toggle('div_ani_show');

Wyskrobałem coś takiego ale ucieka synchronizacja, w ogóle jakoś dziwnie to funkcjonuje

To link do kopii strony:

http://sfagnieszka.eu/ppp/

---

Podeślij mi tą stronę zipem to to skombinuję na dzisiaj/jutro

---

dodanie zdarzenia:

<script>
window.onload = img_replace;

function img_replace()
        {
        var div = document.getElementById("div_ani");
        div.addEventListener("transitionend", ppp, false);
        var interwal_id;
        z = 0;

        function ppp()
                {
                div.classList.remove('div_ani_hidden');

                }

        interwal_id = setInterval(function ()
                {

                div.classList.add('div_ani_hidden');
                div.style.backgroundPosition = "0 " + z + "px";

                z-=200;
                if (z <= -1400) z = 0; //--zerowanie licznika
                }, 10000);
        }

</script>

wygasza się kiedy chce :)

---

dzięki nie trzeba, myślałem, że problem jest prostszy

PS nie chcę abyś odwalał za mnie robotę

jeszcze się pomęczę :D

---

Chyba zrobione :)

<script>
window.onload = img_replace;

function img_replace()
        {
        var div = document.getElementById("div_ani");
        div.addEventListener("transitionend", ppp, false);
        var interwal_id;
        z = 0;

        function ppp()
                {
                div.classList.remove('div_ani_hidden');
                div.style.backgroundPosition = "0 " + z + "px";
                }

        interwal_id = setInterval(function ()
                {

                div.classList.add('div_ani_hidden');
//              div.style.backgroundPosition = "0 " + z + "px";

                z-=200;
                if (z <= -1400) z = 0; //--zerowanie licznika
                }, 10000);
        }

</script>

Problem leżał w zmianie pozycji tła diva

Jednak twoja pomoc okazała się bardzo cenna (dzięki tobie wiem jak obsługiwać zdarzenia css3)

:D