Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: setTimeout
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
woj_tas
Mam taki o to skrypcik

  1. <script type="text/javascript">
  2. var photos=new Array()
  3. var text=new Array();
  4. var i=0;
  5.  
  6. photos[0]="images/1.png";
  7. photos[1]="images/2.png";
  8.  
  9. text[0]="jakis tekst";
  10. text[1]="jakis tekst";
  11.  
  12.  
  13. function backward(){
  14. if (i>0){
  15. i--;
  16. }else{
  17. i=photos.length-1;
  18. }
  19. document.getElementById("photo").src=photos[i];
  20. document.getElementById("home").innerHTML=text[i];
  21.  
  22. setTimeout('forward()',20000);
  23. }
  24.  
  25. function forward(){
  26. if (i<(photos.length-1)){
  27. i++ ;
  28. }else{
  29. i=0;
  30. }
  31. document.getElementById("photo").src=photos[i];
  32. document.getElementById("home").innerHTML=text[i];
  33. setTimeout('forward()',20000);
  34. }

  1. <img src="" alt="Strona główna" width="374" height="240" id="photo" />
  2. <a href="java script:void(0);" onclick="backward()" >Ť poprzednie</a>
  3. <a href="java script:void(0);" onclick="forward()" i>nastepne ť</a>
  4. <div id="home">
  5.  
  6. </div>


ładuje go funkcją onload. Ma za zadanie wyswietlać po kolei grafiki (+opisy). Linki pod obrazkiem służą do przeglądania kolejnych obrazków. Po wczytaniu strony skrypt smiga jak powinien, pokazuje kolejne obrazki.... Jeżeli zaś klikne poprzedni albo nastepny obrazki zaczynaja bardzo szybko sie przewijac, mimo ze funkcja setTimeout jest ustawiona na 20000. Gdzie jest błąd??
nospor
Cytat
Jeżeli zaś klikne poprzedni albo nastepny obrazki zaczynaja bardzo szybko sie przewijac,
Gdyz uruchamiasz znowu setTimeout i teraz masz juz dwa setTimeout, co powoduje ze szybciej sie przewija. Gdy klikniej jeszcze raz to dochodzi kolejny setTimeout itd...
Gdy klikasz recznie w nastepny/poprzedni to nie powinienes wywolywac setTimeout. Dodaj do funkcji drugi parametr, ktory to bedzie rozpatrywal
woj_tas
Super, oto mi wlaśnie chodziło. Ale mam kolejny problem. Przy wolnym łączu może być tak, że obrazke wczytuje sie bardzo długo co gorsza podczas wczytywania pokazują sie jego fragmenty..... Jak zrobić taki jakby preloader?? podczas wczytywania pokazuje sie klepsydra z napisem pobieranie czy cos takiego... Próbowałem coś z document.images[].complete ale nie moge tego rozgrysc.....
misiek172
to się robi stylami CSS

<style type="text/css">
img{background-image: url(url do preloadera);}
</style>
vokiel
Moim zdaniem będzie problem przy automatycznym przechodzeniu przu użyciu
  1. setTimeout('forward()',20000);

ponieważ, jeśli obrazek nie zdązy się załadować, a skrypt samoczynnie przełączy do następnego, to przy wolnym łączu zobaczymy przeskakujące kawałki obrazka, a nigdy nie zobaczymy choć przez chwilę całęgo sad.gif

Cytat
to się robi stylami CSS

<style type="text/css">
img{background-image: url(url do preloadera);}
</style>


Widzę tu takie rozwiązanie: dajemy małego preloadera, a wywołujemy skrypt przejścia do następnego zdjęcia dopiero po kilku sec (danych na obejrzenie załadowanego zdjęcia) po załadowaniu całego obrazka.
Czyli:
  • ładujemy preloadera
  • ściąga się właściwy obraz
  • sprawdzamy czy obrazek się ściąga - jeśli tak ukrywamy warstwę z preloaderem, odkrywamy ze zdjęciem
  • odczekujemy kilka sec (niech użytkownik ma czas go obejrzeć choć przez chwilę)
  • uruchamiamy funkcję ładującą następny

A ja ze swojej strony mam taki problem: nie wiem w jaki sposób sprawdzić czy obrazek się już załadował.
Czy mógłby mi ktoś podpowiedzieć jak to sprawdzić?
woj_tas
Dokładnie o to mi chodzi, i dokładnie mam ten sam problem... Próbowałem z document.images[].complete ale nie wychodzi....
misiek172
ale jeśli chodzi o moje polecenie w CSS to i tak po załadowaniu tego proleadera nie widać bo jest zakrywany ale na upartego ukryć go to nie problem wystarczy js:

document.style = 'background-image: none';
vokiel
nie w tym rzecz.
ja bym robil tak, że wrzucamy div'a, w którym łądujemy tego preloadera (widoczna)
pod spodem mamy warstwę, w której ładuje się żądany obrazek i po załadowaniu obrazka warstwa z preloaderem przechodzi na visible: hidden, a ta z załadowanym naszym obrazkiem jako widoczna.
js i nie problem, problem jest w tym, że nie wiem w jaki sposób sprawdzic czy obrazek juz się ściągnął i załadował do img...
woj_tas
  1. <script type="text/javascript">
  2. <!-- <![CDATA[
  3. var photos=new Array()
  4. var text=new Array()
  5. var i=0
  6. var ImageObject = new Array();
  7.  
  8. photos[0]="plik.png"
  9. text[0]= "text"
  10. photos[1]="plik.png"
  11. text[1]= "text"
  12.  
  13. window.onload=function(){forward(true)}
  14. function backward(action){
  15. if (i>0){
  16. i--;
  17. }else{
  18. i=photos.length-1;
  19. }
  20. ImageObject[i]=new Image;
  21. ImageObject[i].src = photos[i];
  22.  
  23. document.getElementById("homeImageBottomText").innerHTML="laduje"
  24. Download();
  25.  
  26. if(action == true)
  27. setTimeout('forward(true)',10000);
  28. }
  29.  
  30. function forward(action){
  31. if (i<(photos.length-1)){
  32. i++;
  33. }else{
  34. i=0;
  35. }
  36. ImageObject[i]=new Image;
  37. ImageObject[i].src = photos[i];
  38.  
  39. document.getElementById("homeImageBottomText").innerHTML="laduje"
  40. Download();
  41.  
  42. if(action == true)
  43. setTimeout('forward(true)',10000);
  44. }
  45.  
  46. function Download() {
  47. if (ImageObject[i].complete) {
  48. document.getElementById("photo").src=ImageObject[i].src;
  49. document.getElementById("homeImageBottomText").innerHTML=text[i];
  50. }
  51. else
  52. setTimeout("Download()", 100);
  53.  
  54. return true;
  55. }
  56. // ]]> -->
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.