[JS] Problem ze zdarzeniem onLoad obiektu Image

0

Witam, mam od kilku dni problem ze zdarzeniem OnLoad komponentu Image. Funkcja przypisana do tego zdarzenia działa w Operze, ale w IE6 i FireFoxsie nie chce zadziałać. Wydaje mi się, że te przeglądarki mają jakieś błędy przy obsłudze zdarzenia onload obiektu Image.
Pokaże kod mojego skryptu (galerii). Po kliknięciu na obrazek na stronie, wywoływana jest funkcja PokazObraz ze ścieżką do pliku i opisem obrazka. Przy czym ważna rzecz, powiększony obrazek ma pojawiać się na warstwie a nie w nowym oknie przeglądarki. Problem w tym, że zdarzenie OnLoad uruchamia się we wspomnianych przeglądarkach nie w tym momencie co trzeba (tzn. przed załadowaniem obrazka ;-)

<script type="text/javascript">
  var loaded=false;
  function PokazObraz(nazwa_pliku)
  {
    var plik = new Image();
    loaded=false;
    plik.onload=AfterLoad;
    plik.src = nazwa_pliku;
    // Niektóre przeglądarki nie wykonują pustych pętli
    while (!loaded)
    { loaded=loaded; }
    // po tej pętli obrazek powinien być już w całości załadowany, jego dane (takie jak szerokość i wysokość powinny być dostępne) - a w IE6 i FF nie są
    loaded=false;
    wysw = document.getElementById('podglad');
    wysw.src = plik.src;
    alert(plik.width); // w Operze wyświetla prawidłową szerokość obrazka, a w innych przeglądarkach 0
  }
  function AfterLoad()
  { loaded = true; }

</script>

Jak wspomniałem, w Operze wszystko jest OK. Zastepowałem zdarzenie onload funkcją attachEvent() oraz addEventListener() i dalej to samo. Nie widzę już rozwiązania tego problemu. Spotkaliście się może z czymś takim? Bardzo prosiłbym taką osobę o pomoc, ponieważ siedzę już nad tym trzeci dzień ;-)

0

plik.onload=AfterLoad<font size="2">()</span>;
...no jesli Ty tak przypisujesz to sie nie dziw...

  • jesli bedziesz miec dalej problem, stworz obrazek przez createElement itp...
0

Poczytaj może o sposobach dynamicznego podpinania eventów:
http://www.quirksmode.org/js/events_advanced.html, Fx na pewno obsługuje model W3c, ale nigdy nie sprawdzałem dla img czy onload działa,

0

FF od wersji 1 powinno obslugiwac onload http://w3schools.com/jsref/jsref_events.asp
http://w3schools.com/jsref/jsref_onload.asp

<html>
<head>
	<script type="text/javascript">

	  function PokazObraz(nazwa_pliku)
	  {
	    wysw = document.getElementById('podglad');
	    wysw.src = nazwa_pliku;

	    
	  }
	  function AfterLoad(obj)
	  { 
			var img = new Image();
			img.src = obj.src;
			alert(img.width);
	  }

	</script>
</head>
<body>
	<input type="button" value="img load" onclick="PokazObraz('0,,5675247,00.gif');" />
	<img id="podglad" onload="AfterLoad(this);"/>
</body>
</html>
0

Tak, ale problem raczej nie w tym, czy ff obsłuży onload w htmlu; moim zdanie problem polega na sposobie dynamicznego podpięcia eventu
plik.onload=AfterLoad();

0

Nie, nie, przepraszam Was - wkradł się rzeczywiście mały błąd. Również z poprawnym przypisaniem nie działa:

plik.onload=AfterLoad;

Co do funkcji addEventListener() - tak jak pisałem - próbowałem - nadal to samo. Zdarzenie wywoływane jest nie w tym momencie co trzeba.

massther, Twój kod prawdopodobnie zadziała prawidłowo - ale nie tu leży problem. Problem leży w dynamicznym ładowaniu obrazów i wyświetlaniu ich jako tło w pewnym DIVie. Chodzi mi ewidentnie o dynamiczną obsługę zdarzeń.

0

Zdarzenie wywoływane jest nie w tym momencie co trzeba.

Czyli wywołuje się, ale w nieodpowiednim momencie? Możesz to rozwinąć?

0

Haha!!! Udało się! Chodziło o pętlę while która czekała na załadowanie się obrazka. W efekcie, przez swoje zapętlenie, uniemożliwiała wywołanie funkcji AfterLoad(). Byłem zupełnie zaślepiony ;-) Przeniosłem więc większość kodu do AfterLoad, rezygnując w ten sposób z pętli oczekującej, użyłem obiektu this jako odwołania do obiektu którego zdarzenie dotyczy i podziałało. Jedyna wada to brak możliwości przekazania parametrów do funkcji AfterLoad, w wyniku czego parametry przekazuje "nieładnie" jako zmienne globalne. Rozwiązanie nasunął mi kolega z innego forum, ale bardzo dziękuję również Wam za odpowiedzi.

Przedstawiam kod:

  var p_nazwa_pliku;
  var p_opis;		
  function pokazObraz(nazwa_pliku,opis)
  {
    p_opis = opis;
    p_nazwa_pliku = nazwa_pliku;
    var plik = new Image();
    plik.onload = AfterLoad;
    plik.src = nazwa_pliku;
  }

  function AfterLoad(evt)
  {
	 var podglad_warstwa = document.getElementById("podglad_warstwa");
	 var podglad_zawartosc = document.getElementById("podglad_zawartosc");
	 podglad_zawartosc.style.backgroundImage = '"url('+p_nazwa_pliku+')"';
	 podglad_zawartosc.style.width = this.width+'px';
	 podglad_zawartosc.style.height = this.height+'px';
             podglad_warstwa.style.display = 'block';
  }

1 użytkowników online, w tym zalogowanych: 0, gości: 1