setTimeout Opcje

[woj_tas]

Mam taki o to skrypcik

[HTML] pobierz, plaintext 
<script  type="text/javascript">
var photos=new Array()
  var text=new Array();
  var i=0;
 
  photos[0]="images/1.png";
  photos[1]="images/2.png";
 
  text[0]="jakis tekst";
  text[1]="jakis tekst";
 
 
  function backward(){
    if (i>0){
      i--;
    }else{
      i=photos.length-1;
    }
      document.getElementById("photo").src=photos[i];
      document.getElementById("home").innerHTML=text[i];
 
      setTimeout('forward()',20000);
  }
 
  function forward(){
    if (i<(photos.length-1)){
      i++  ;
    }else{
      i=0;
    }
      document.getElementById("photo").src=photos[i];
      document.getElementById("home").innerHTML=text[i];
      setTimeout('forward()',20000);
  }
</script>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<img src="" alt="Strona główna" width="374" height="240"  id="photo" />
    <a href="java script:void(0);" onclick="backward()" >Ť poprzednie</a> 
    <a href="java script:void(0);" onclick="forward()"  i>nastepne ť</a>
    <div id="home">
 
    </div>
[HTML] pobierz, plaintext 

ł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]

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

[HTML] pobierz, plaintext 
setTimeout('forward()',20000);
[HTML] pobierz, plaintext 

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

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]

[HTML] pobierz, plaintext 
<script  type="text/javascript">
<!-- <![CDATA[ 
  var photos=new Array()
  var text=new Array()
  var i=0
  var ImageObject = new Array(); 
 
  photos[0]="plik.png"
  text[0]=  "text"
  photos[1]="plik.png"
  text[1]=  "text"
 
  window.onload=function(){forward(true)}
  function backward(action){
    if (i>0){
      i--;
    }else{
      i=photos.length-1;
    }
      ImageObject[i]=new Image;
      ImageObject[i].src = photos[i];
 
      document.getElementById("homeImageBottomText").innerHTML="laduje"
      Download();    
 
      if(action == true)
        setTimeout('forward(true)',10000);
  }
 
  function forward(action){
    if (i<(photos.length-1)){
      i++;
    }else{
      i=0;
    }
      ImageObject[i]=new Image;
      ImageObject[i].src = photos[i];
 
      document.getElementById("homeImageBottomText").innerHTML="laduje"
      Download();
 
      if(action == true)
        setTimeout('forward(true)',10000);
  }
 
  function Download() {
   if (ImageObject[i].complete) {
       document.getElementById("photo").src=ImageObject[i].src;
       document.getElementById("homeImageBottomText").innerHTML=text[i];     
   }
   else 
      setTimeout("Download()", 100); 
 
   return true;
  }
// ]]> -->
</script>
[HTML] pobierz, plaintext 

Ten post edytował woj_tas 20.03.2007, 00:27:30