Autor Zpráva
Pepan223ER
Profil *
Ahoj,
potřebuji pro svůj projekt vytvořit skript v JavaScriptu pro preload (předstáhnutí) všech součástí tzn. stránka, skripty, obrázky, styly
Mělo by to mít grafický statusbar, kde se bude procentuelně zobrazovat kolik je načteno procent z aplikace.
Až po načtení všech součástí zobrazí danou stránku.

Nikde nemůžu nic kloudnýho najít.
Předem děkuji za pomoc ...
Darker
Profil
Skript by fungoval tak, že by projel všechny elementy které mají (resp. mohou mít) platný atribut SRC a potom registroval jejich událost načtení.
Je to nejlepší cesta jak naštvat uživatele s pomalejším připojením, kterým by stránka už dávno fungovala i bez, dejme tomu, nenačtené ikonky tlačítka. Silně nedoporučuji, podobné frajeřinky nejsou dobrá reklama.
Str4wberry
Profil
Medle záleží, co to je za stránku. Pokud by to byla aplikace založená na JS a obrázcích, například webová hra, tak donačítání pod rukama není žádná výhra a frajeřinka může být naopak cesta, jak se vyhnout problémům.
Darker
Profil
Str4wberry:
frajeřinka může být naopak cesta, jak se vyhnout problémům.
Taky jsem se s obecným řešením netajil, hotové bohužel nemám a vytvořit ho tak aby bylo spolehlivé (řešení nenačtených/neexistujících obrázků) by mi asi přecejen chvíli zabralo.
Pepan223ER
Profil *
nejde o klasické stránky jde o aplikaci, která je za skriptech a obrázcích hodně závislá - bez nich to nefunguje. Takže pro lidi s pomalým připojením je to právě jediná cesta! :-(
Darker
Profil
V tom případě dej vědět, co ti chybí k tomu, abys mohl implementovat to uvedené.
Str4wberry
Profil
Spolehlivé řešení by asi bylo si serverovým skriptem spočítat, jakou měrou se každý jeden prvek stránky podílí na celkovém datovém objemu. A po jeho načtení o tento podíl navýšit ukazatel průběhu načítání. Kdyby ukazatel měl být ještě přesnější, bral by v úvahu i počty spojení (načíst 10 obrázků o 10 kB bude nejspíš trvat déle než načíst jeden 12kB).

Pokud by se v aplikaci povedlo rozumně sdružit styly, skripty a obrázky — tedy mít jeden CSS soubor, jeden JS soubor a jeden soubor se všemi obrázky, šlo by s uspokojivým výsledkem celou frajeřinku zhotovit ručně a celkem jednoduše.
Pepan223ER
Profil *
Darker:
nevím jak skriptu pro preload dosáhnout ...

všimnul jsem si, že ho využívá skolni-sesit.cz ale nevim jak toho docílili ...
Darker
Profil
Pepan223ER:
Právě jsi tu dostal dva různé návody, jeden ode mně, jeden od Str4wberryho. Potřebujeme vědět, co nevíš.
Pepan223ER
Profil *
nevim jak přesně přednačíst soubory, URL k souborům mam v poly, nevim jak dál :-(
preca1
Profil
Pepan223ER
Zdravim,
pokud je to čistě JS aplikace (má pouze jednu HTML stránku), tak bych doporučil:
všechny skripty a styly dát do této jedné stránky (klasika),
na začátek dokumentu dáš masku (div 100% x 100%, který všechno překrývá),
před každý script / styl, co načítáš, dáš volání funkce, která bude měnit text masky ("Načítam skripty", "Načítam CSS", "Načítam základní knihovnu"),
na onload body (víš, že všechny skripty a CSS sou načtený) spustíš svojí aplikaci (vykreslíš a naplníš všechny view, načteš všechny obrázky, ...),
na onlaunch aplikace odstraníš masku.
Není to tak přesné jako řešení, co navrhl Str4wberry, ale zas je jednodušší na implementaci. Záleží na tom, jak moc chceš uživateli dát vědět, co se děje.

Jinak soubory po načtení stránky můžeš načítat následovně:
používam Prototype.js a bohužel sem línej hledat, jak se to dělá v čistym JS, ale princip je asi takovýto: Vytvoříš nový element link (script pro JS) a nastavíš mu potřebné paramtery (u JS je to src a type). A pak ten element vložíš do stránky (do hlavičky, do body, za body, kam chceš). Nakonec ještě musíš zjistit, že soubor byl načtenej, což nevim, jak zjistit.
Kód (v Prototypu):
// vytvořím element
var cssEl = new Element('link', {
    'rel': 'stylesheet',
    'type': 'text/css',
    'href': 'cestaKTvemuCss.css'
  });
  // vložím do stránky
  var headEl = $$('head')[0];
  headEl.insert({
    top: cssEl
  });

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0