Forum PHP.pl > [JavaScript] załadowanie skryptu dopiero po wyświetleniu diva w oknie przeglądarki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] załadowanie skryptu dopiero po wyświetleniu diva w oknie przeglądarki

blokern

29.10.2016, 18:00:09

cześć w jaki sposób odpalić skrypt JS dopiero w momencie w którym w oknie przeglądarki zobaczę w 100% element w tym przypadku div o id="xyz"?

np

[HTML] pobierz, plaintext 
<html>
<head>
</head>
<body>
<h1>test</h1>
<div style="height: 2300px;">abc</div>
<div id="xyz" style="width: 10px; height: 10px; background: #ff6600;"></div>
</body>
</html>
[HTML] pobierz, plaintext

reasumując: wchhodzę na stronę, przewijam stronę w dół i jak w widze warste xyz to załadowuje mi sie skrypt

z góry dziekuje za pomoc

SmokAnalog

29.10.2016, 23:35:30

Pobierasz pozycję elementu w pionie i przy scrollowaniu sprawdzasz czy pozycja okna pokrywa się z pozycją tego elementu. Możesz do tego dodać więcej matematyki i sprawdzać też czy element nie jest czasem widoczny od dołu. Wtedy będziesz potrzebował też wysokości elementu do obliczeń oraz wysokości okna przeglądarki.

blokern

30.10.2016, 18:17:44

dziekuje SmokAnalog

mam taki dzialajacy kod, jak slowo Hello znajdzie sie w oknie przegladarki to wyswietli sie w consoli slowo hura.
jak zrobic zeby sumowal w sekundach czas wyswietlania sie hura w consoli?

[PHP] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function log(txt) {
  var wys = ($(window).height())
  if((txt)>=0){
	  if((wys)>=(txt)){
  console.log('hura')
	  }
  }
}
$(function() {
  var eTop = $('#element').offset().top; 
  log(eTop - $(window).scrollTop()); 
  $(window).scroll(function() { 
    log(eTop - $(window).scrollTop());
  });
});
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 1000px;"></div>
<div id="element">Hello</div>
<div style="height: 1800px;"></div>
</body>
</html>
 
 
[PHP] pobierz, plaintext

SmokAnalog

30.10.2016, 18:45:14

Żeby sumować czas przy zdarzeniu, użyj setInterval() kiedy zdarzenie zachodzi i clearInterval(), kiedy już nie zachodzi. Nie wiem co dokładnie chcesz zrobić, ale najlepiej sumuj jakąś mniejszą porcję czasu niż sekundy, np. 100ms. Jeśli zrobić pełne sekundy, to przy szybkim scrollowaniu licznik złapie zero. No chyba, że tak ma być

blokern

30.10.2016, 19:23:08

setInterval() - dokladnie i wywoluje przy zdarzeniu czyli zaraz w ifie tylko, ze zle zrobilem bo wszystko i tak wywoluje sie przy scrolowaniu $(window).scroll(function() a jak to przerobic tak zeby dzialalo w tle (sprawdzalo pozycje bez scrolowania a poprostu w tle dzialania strony?

SmokAnalog

30.10.2016, 20:39:16

Ten setInterval() ustawiasz na scrollu, ale tylko jeśli nie jest aktualnie ustawiony. To jest łatwo sprawdzić, po prostu zapisuj go (lub sam stan) w jakiejś zmiennej i sprawdzaj.

blokern

30.10.2016, 20:39:43

sam sobie odpowiem. pewnie kod bardzo zle napisany ale dziala i teraz co sekunde pokazuje mi komunikat "jep" jezeli "Hello" znajduje sie w oknie przegladarki

[PHP] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
setInterval("abc();",1000); 
    function abc(){
        var eTop = $('#element').offset().top;
		var roznica = eTop - $(window).scrollTop();
		var wys = ($(window).height())
		if((roznica)>=0){
			if((wys)>=(roznica)){
			 console.log('jep')
			}
		}
    }	
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 1000px;"></div>
<div id="element">Hello</div>
<div style="height: 1800px;"></div>
</body>
</html>
[PHP] pobierz, plaintext

SmokAnalog

30.10.2016, 20:44:35

Tak też może być w sumie

Zrobiłeś inaczej, bo u Ciebie interval działa cały czas i albo dodaje, albo nie. Moja wersja zakładała, że interval w ogóle nie działa, kiedy element jest poza oknem.

Taka ciekawostka - zamiast pisać:

[JAVASCRIPT] pobierz, plaintext 
setInterval("abc();", 1000);
[JAVASCRIPT] pobierz, plaintext

Wystarczy po prostu:

[JAVASCRIPT] pobierz, plaintext 
setInterval(abc, 1000);
[JAVASCRIPT] pobierz, plaintext

blokern

30.10.2016, 21:21:23

to z (abc,1000) zapamietam. dzieki

ogolnie tak to wyglada... ale napisz prosze na co zwrocic uwage przy modyfikacji zeby skrypt tak jak wspomniales dzialal tylko jak element jest w oknie przegladarki?

[PHP] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
time = 0;
setInterval(abc,1000); 
    function abc(){
        var eTop = $('#gora').offset().top;
		var eTopDol = $('#dol').offset().top;
		var roznica = eTop - $(window).scrollTop();
		var roznicaDol = eTopDol - $(window).scrollTop();		
		var wys = ($(window).height())
		if((roznica)>=0){
			if((wys)>=(roznica)){
				var gora = 1;
				if((wys)>=(roznicaDol)){
					if((roznicaDol)>=200){
					var dol = 1;
							if((gora+dol)>=2){
							console.log(gora+dol);
							time++;
							if((time)==5){
							console.log('boom'); //tutaj zliczam statystyki
							}
						}
					}
				}
			}
		}
    }	
</script>
</head>
<body>
<div style="height: 1000px;"></div>
<div id="gora"style="border-top: 1px solid #000;"></div>
<div style="height: 200px;">box co ma 200px wysokosci</div>
<div id="dol" style="border-top: 1px solid #000;"></div>
<div style="height: 1000px;"></div>
</body>
</html>
[PHP] pobierz, plaintext

SmokAnalog

30.10.2016, 21:29:05

A może powiedz najpierw do czego Ci jest potrzebne to zliczanie czasu, kiedy element jest widoczny? To jest jakaś informacja czy używasz tego np. przy animacji?

blokern

30.10.2016, 21:37:55

mam serwis internetowy i chce sprawdzic czy sa widoczne moje reklamy przez dluzszy czas niz 5 sekund i dlatego odliczanie do 5 sekund jest mi potrzebne kiedy div o id gora i div o id dol jest widoczne w oknie przegladarki - skrypt smiga ciagle ale wspomniales ze moze tylko wtedy kiedy dany element sie pokaze?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.