Re: prosty loader w JS na stronę - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › prosty loader w JS na stronę › Re: prosty loader w JS na stronę

Path: news-archive.icm.edu.pl!news.rmf.pl!agh.edu.pl!news.agh.edu.pl!news.onet.pl!.PO
STED!not-for-mail
From: Peter May <p...@o...pl>
Newsgroups: pl.comp.www
Subject: Re: prosty loader w JS na stronę
Date: Thu, 16 Dec 2010 21:48:08 +0100
Organization: http://onet.pl
Lines: 61
Message-ID: <iedtua$41t$1@news.onet.pl>
References: <4d073646$0$27045$65785112@news.neostrada.pl>
<o...@a...local>
<4d087e37$0$21007$65785112@news.neostrada.pl> <ieaeti$svt$1@news.onet.pl>
<ieb5nd$at1$1@inews.gazeta.pl> <ieb7qn$rt4$1@news.onet.pl>
<iedhs7$87c$1@inews.gazeta.pl>
NNTP-Posting-Host: 178.182.93.115.nat.umts.dynamic.eranet.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: news.onet.pl 1292532491 4157 178.182.93.115 (16 Dec 2010 20:48:11 GMT)
X-Complaints-To: n...@o...pl
NNTP-Posting-Date: Thu, 16 Dec 2010 20:48:11 +0000 (UTC)
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.13) Gecko/20101207
Lightning/1.0b2 Thunderbird/3.1.7
In-Reply-To: <iedhs7$87c$1@inews.gazeta.pl>
Xref: news-archive.icm.edu.pl pl.comp.www:397741
[ ukryj nagłówki ]
W dniu 2010-12-16 18:22, Paweł Piskorz pisze:
> On 2010-12-15 21:18, Peter May wrote:
>> W dniu 2010-12-15 20:42, Paweł Piskorz pisze:
>>> On 2010-12-15 14:13, Peter May wrote:
>>>> Weź dodaj prosty <div id="preload"> (koniecznie JavaScript-em) z
>>>> tekstem
>>>> "Trwa ładowanie" w <head>, a potem podepnij pod zdarzenie onload w body
>>>> usunięcie tego. I po sprawie.
>>>
>>> W head nie dodasz nic do body, bo body jeszcze nie istnieje. Timeouta
>>> nie ma jak wyliczyć, zaś onload/ready to już zapóźno ;]
>>
>> Argh... miało być tuż przed </body>
>
> Tuż przed </body> to już stronę dawno widać, próbuj dalej :D

Stronę widać, ale się nie załadowała. A to różnica. Szczegółowo to
zrobiłbym to tak:

1. Zakładam, że html mógłby mniej więcej tak wygląda:

[...]
<body>
<div class="overlay">
[...]
cała reszta
[...]
<div id="footer"></div>
</div>
</body>

2. W <head> ustawiam klasę np. js_on dla <html>-a, JavaScript-em, a w
CSS-ie dodaję takie style:

.js_on div.overlay{
background:#fff;
z-index:1000;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

3. Do footer pakuję znów JS, gdzie generuję sobie bajerancki tekst "Trwa
ładowanie" oraz pod zdarzenie onload dla obiektu window podpinam
funkcję, która usunie mi div.overlay.

W ten sposób user nie zobaczy strony dopóty, dopóki nie załaduje mu się
ona w całości. A przynajmniej do czasu wywołania funkcji w zdarzeniu
onload dla obiektu window.

A jeszcze bardziej szczegółowo to wywołanie funkcji powinno nastąpi
wtedy, gdy jesteś w sytuacji pt. "DOM content is ready". Opis można
znaleźć np. tutaj:

http://subprint.com/blog/demystifying-the-dom-ready-
event-method/

--
Peter