Witam,

Mamy stronę HTML. Ładuje się ona i na koniec odpalane jest zdarzenie
onLoad. Teraz zaczyna działać JS, który powiedzmy ładuje jeszcze ze 3
obrazki osadzając dynamicznie <img> w treści strony. Czy znów onLoad w
takim przypadku uruchomi się? Jeśli nie, to jak wykryć kiedy wszystkie
obrazki zostaną załadowane przez przeglądarkę aby móc pobrać np. nowy
rozmiar pikselowy strony WWW?

--
Pozdrawiam
Marek

do góry

W dniu 2014-06-11 13:43, Marek pisze:
> Witam,
>
> Mamy stronę HTML. Ładuje się ona i na koniec odpalane jest zdarzenie
> onLoad. Teraz zaczyna działać JS, który powiedzmy ładuje jeszcze ze 3
> obrazki osadzając dynamicznie <img> w treści strony. Czy znów onLoad w
> takim przypadku uruchomi się? Jeśli nie, to jak wykryć kiedy wszystkie
> obrazki zostaną załadowane przez przeglądarkę aby móc pobrać np. nowy
> rozmiar pikselowy strony WWW?

window.onload jest wywoływany:

"
[...] at the end of the document loading process. At this point, all of
the objects in the document are in the DOM, and all the images, scripts,
links and sub-frames have finished loading.
"

Źródło:
https://developer.mozilla.org/en-US/docs/Web/API/Glo
balEventHandlers.onload

Jak już załadujesz stronę to możesz przykładowo tak załadować 3 obrazki
i wywołać na końcu funkcję callback:

(Przykład, niekoniecznie zoptymalizowany!)

var iloscObrazkow = 0;

function update() {
iloscObrazków += 1;
if (iloscObrazków === 3) { // przykladowo gdy 3 obrazki chcemy
załadować
callback(); // wywołanie funkcji gdy wszystkie 3 obrazki są
załadowane
}
}

function loadImg(url) {
var img = document.createElement('img');
img.onload = function () {
update();
};
img.src = url;
}

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry

W dniu 2014-06-11 23:39, Cezary Tomczyk pisze:
>
> var iloscObrazkow = 0;
>
> function update() {
> iloscObrazków += 1;
> if (iloscObrazków === 3) { // przykladowo gdy 3 obrazki chcemy
> załadować
> callback(); // wywołanie funkcji gdy wszystkie 3 obrazki są
> załadowane
> }
> }
>
> function loadImg(url) {
> var img = document.createElement('img');
> img.onload = function () {
> update();
> };
> img.src = url;
> }
>

Rozumiem. A co w przypadku innego rodzaju contentu? Czy mogę utworzyć
dynamicznie jednego DIVa zawierającego mieszany content (w tym te 3
obrazki) i na nim badać onLoad?

--
Pozdrawiam
Marek

do góry

W dniu 2014-06-12 00:15, Marek pisze:
> W dniu 2014-06-11 23:39, Cezary Tomczyk pisze:
>>
>> var iloscObrazkow = 0;
>>
>> function update() {
>> iloscObrazków += 1;
>> if (iloscObrazków === 3) { // przykladowo gdy 3 obrazki chcemy
>> załadować
>> callback(); // wywołanie funkcji gdy wszystkie 3 obrazki są
>> załadowane
>> }
>> }
>>
>> function loadImg(url) {
>> var img = document.createElement('img');
>> img.onload = function () {
>> update();
>> };
>> img.src = url;
>> }
>>
>
> Rozumiem. A co w przypadku innego rodzaju contentu? Czy mogę utworzyć
> dynamicznie jednego DIVa zawierającego mieszany content (w tym te 3
> obrazki) i na nim badać onLoad?

Użyj XMLHttpRequest.

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry

W dniu 2014-06-13 08:29, Cezary Tomczyk pisze:

> Użyj XMLHttpRequest.

Ale w jaki sposób? Czy mam pobrać w ten sposób HTML do wstawienia na
stronę? To nie miałoby sensu gdyż fakt wstawienia HTML uruchomi kolejna
transmisje danych w celu pobrania np. obrazków. Z kolei raczej nie da
się, a przynajmniej nie wyobrażam sobie jak, przeanalizować dynamiczny
HTML w celu wyłonienia w nim obrazków i zastępowania ich jakimś skryptem
createElement('img').

Chodzi o to, że robię galerię obrazków. Wszystkie są ułożone jeden obok
drugiego i zawierają opisy. Strzałki lewo / prawo mają przesuwać po
jednym obrazku z opisem w taki sposób aby znalazły się one zawsze na
środku ekranu. Aby było to możliwe, muszę znać wymiary każdego z boxów
zawierających wspomniany obrazek + opis. Jeśli będę badał rozmiary tych
boxów przed załadowaniem się kompletu obrazków, otrzymam fałszywy wynik.
Chciałem usprawnić sobie pracę i wykryć zdarzenie "załadowano komplet".
Jednakże chyba nie da się tego zrobić i muszę zrezygnować z wstawiania
HTML na rzecz createElement('img') i badania obrazek po obrazku
kompletności galerii. Czy dobrze rozumuję?

--
Pozdrawiam
Marek

do góry

Dnia Fri, 13 Jun 2014 09:04:44 +0200, Marek napisał(a):

> Jednakże chyba nie da się tego zrobić i muszę zrezygnować z wstawiania
> HTML na rzecz createElement('img') i badania obrazek po obrazku
> kompletności galerii. Czy dobrze rozumuję?

A nie byłoby lepiej osadzić w treści HTML atrybuty width i height?

Bo jak dla mnie straszliwie komplikujesz coś tak prostego.

--
Borys Pogoreło
borys(#)leszno,edu,pl

do góry

W dniu 2014-06-13 09:04, Marek pisze:
[...]
> Chodzi o to, że robię galerię obrazków. Wszystkie są ułożone jeden obok
> drugiego i zawierają opisy. Strzałki lewo / prawo mają przesuwać po
> jednym obrazku z opisem w taki sposób aby znalazły się one zawsze na
> środku ekranu. Aby było to możliwe, muszę znać wymiary każdego z boxów
> zawierających wspomniany obrazek + opis. Jeśli będę badał rozmiary tych
> boxów przed załadowaniem się kompletu obrazków, otrzymam fałszywy wynik.
> Chciałem usprawnić sobie pracę i wykryć zdarzenie "załadowano komplet".
> Jednakże chyba nie da się tego zrobić i muszę zrezygnować z wstawiania
> HTML na rzecz createElement('img') i badania obrazek po obrazku
> kompletności galerii. Czy dobrze rozumuję?

Ekhm, a nie możesz dla środkowego boksu nadać max-height i max-width +
overflow: hidden; dla pewności? Mam wrażenie, że coś za bardzo
komplikujesz. Po co przeprowadzać jakieś dodatkowe kalkulacje?

Ja bym po prostu ładował obrazek na żądanie w momencie kliknięcia
strzałki lewo/prawo + użyłbym CSS do animacji. Lepsza wersja może
zakładać buforowanie następnego obrazka w tle, ale to oznacza (może) nie
potrzbne zużywanie łącza :-)

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry

W dniu 2014-06-13 14:47, Borys Pogoreło pisze:


> A nie byłoby lepiej osadzić w treści HTML atrybuty width i height?

Nie bardzo. W tej konkretnej realizacji "box" to tytuł obrazka w 1
linii, dane techniczne (wymiary i technika wykonania) w następnych.
Po prawej jest obraz. Galeria składa się z animowanych (przesuwanych w
poziomie) w/w boxów. Gdy kliknę strzałkę w lewo, to dany box wygasza się
i przesuwa w lewo a następny wyłania się i zajmuje centralną część
miejsca okna przeglądarki itd. No i teraz aby móc go wycentrować, to
muszę znać wymiary tego box'a. A zależne one są:
- od wymiarów umieszczonego w nim obrazka
- od szerokości tekstów

O ile W i H obrazka mógłbym wydobyć, o tyle wymiary tekstów są nie do
ustalenia.

> Bo jak dla mnie straszliwie komplikujesz coś tak prostego.

Być może...

--
Pozdrawiam
Marek

do góry

W dniu 2014-06-13 15:59, Cezary Tomczyk pisze:

>
> Ekhm, a nie możesz dla środkowego boksu nadać max-height i max-width +
> overflow: hidden; dla pewności? Mam wrażenie, że coś za bardzo
> komplikujesz. Po co przeprowadzać jakieś dodatkowe kalkulacje?

No ale co to mi da? Jedynie maksymalne ograniczenie narzucę w ten
sposób. Ponadto i tak to ryzykowne gdyż box składa się z obrazka i jego
opisu po lewej. Szerokości opisu nie znam i muszę go bez łamania linii
prezentować. Nic nie może być "hidden" na szerokość.

To jest bardziej rozbudowana wersja tego:
http://www.jr-associee.com/artist-naomi-yang

Zwróć uwagę, że sąsiadujące obrazy też są widoczne. U mnie dochodzę
jeszcze teksty. Nie chciałem aż tak detalicznie opisywać tego co mam zrobić.

> Ja bym po prostu ładował obrazek na żądanie w momencie kliknięcia
> strzałki lewo/prawo + użyłbym CSS do animacji. Lepsza wersja może
> zakładać buforowanie następnego obrazka w tle, ale to oznacza (może) nie
> potrzbne zużywanie łącza :-)

Buforowanie musi być z uwagi na szybkość przewijania. Przy szybszym będą
powstawały dziury w miejscu niezaładowanej grafiki.

--
Pozdrawiam
Marek

do góry

W dniu 2014-06-14 15:18, Marek pisze:
[...] Galeria składa się z animowanych (przesuwanych w
> poziomie) w/w boxów. Gdy kliknę strzałkę w lewo, to dany box wygasza się
> i przesuwa w lewo a następny wyłania się i zajmuje centralną część
> miejsca okna przeglądarki itd. No i teraz aby móc go wycentrować, to
> muszę znać wymiary tego box'a. A zależne one są:
> - od wymiarów umieszczonego w nim obrazka
> - od szerokości tekstów
[...]

A dlaczego obrazka i tekstu nie dopasować do boksu? Ustawiasz 3 boksy
obok siebie dopasowane do wymarów okna przeglądarki i w te boksy
osadzasz obrazki i teksty.

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry