Autor Zpráva
Mufna
Profil
Zdravím Vás a prosím o radu. Mám jednoduchou stránku se 2 obrázky, zdroják je:

<body bgcolor="#ff008a" style="margin:0;padding:0;text-align:center;width:100%;height:100%">
<div style="width:600px;height:300px;margin:auto;margin-top:10px;background -image:url('full.jpg')">
<div align="left" style="margin-left:60px"><img src="semafor.gif"></div>
</div>

</body>

Větší obrázek (dat. objemem - asi 80kb) je ten na pozadí, menší je animovaný gif. Potřeboval bych nějak zajistit, aby se nejprve načetl (a zobrazil) ten větší (pozadí) a teprve poté ten menší. Můžete mi někdo poradit, jak na to. Předem díky !
peta
Profil
Mufna
pokud stranka presahne 40k i s grafikou, tak ji obvykle opoustim. Nemam zajem cekat, az se mi neco natahne a preusporada. Zmensi pozadi tak, aby melo 20-30k a nemas problem.
Samozrejme, ze to jde resit JS, co chces, ale je zbytecne do stranky pridavat kod 1k navic a ten pak v podstate do vsech dalsich.
Joker
Profil
peta
pokud stranka presahne 40k i s grafikou, tak ji obvykle opoustim.
Co si pamatuju z použitelnosti, důležitá je doba načítání stránky pod 10s, takže 40kB limit znamená optimalizovat pro připojení od 32kbps. To mi v dnešní době přijde jako docela brutální požadavek.
Dnes už bych klidně bral jako základ 64kbps, takže velikost "rychlé" stránky do 80kB.

Mufna
Potřeboval bych nějak zajistit, aby se nejprve načetl (a zobrazil) ten větší (pozadí) a teprve poté ten menší.
to půjde těžko. Pokud je pomalé načítání obrázků problém, zkusil bych zmenšit datový objem obrázků.
Možná by situaci zlepšilo přednačítání toho velkého obrázku pomocí Javascriptu.
Mufna
Profil
No, čekal jsem, že mi někdo poradí (dobře nebo hůře - stačí i třeba odkaz někam, nejsem v JS kovanej), a ne že se bude rozebírat to, jestli někdo opouští nebo neopouští stránku s grafikou přes 40 kb.

BTW, ta stránka je moje grafická reference a proto chci, aby obrázky měly dostatečnou kvalitu. Zmenšit to asi fakt nepude.

Jen tak zběžně jsem to začal řešit sám, nešlo by využít nějakou funkci pro načtení obrázků v kombinaci se "setTimeout" ?

A ještě jedna maličkost: funguje JS v e-mailu ??? .... myslím tím obrázkový (HTML) e-mail.
Mufna
Profil
Joker:
Možná by situaci zlepšilo přednačítání toho velkého obrázku


Ale jak ? Jednoduchý JS typu

<script type="text/Javascript">
var img = new Image();
img.src = 'nejaky-obr.jpg'
</script>


mi nepomůže.... Tak o tom přemýšlím i z jiné strany, no nakonec snad budu muset zvětšit ten menší image tak, aby byl datově větší než to pozadí. Ale jistota, že se pak nejdřív načte to pozadí, to asi není, že ? Ale kdybych měl vše udělat jako jeden obrázek (musel by to být animovaný gif s rozměry 600x300px), tak bych se v datovém objemu takového souboru (obrázku) dostal na daleko vyšší hodnotu.
Joker
Profil
Mufna
Ale kdybych měl vše udělat jako jeden obrázek (musel by to být animovaný gif s rozměry 600x300px), tak bych se v datovém objemu takového souboru (obrázku) dostal na daleko vyšší hodnotu.
No, jestli jsou oba obrázky už teď jako GIF, mohl by výsledek být zhruba stejně velký jako součet těch současných.

Další možnost je přes JS začít ten druhý obrázek načítat až na onload toho prvního.
Bubák
Profil
Mufna
Zkus upravit tohle:
http://teststranek.kvalitne.cz/obrazek-zobrazit-nacteny.html

Zpoždění 10ms je tam kvůli prohlížeči Opera, pokud byl obrázek v keši (druhá návštěva stránky), tak zapřela onload.

Schová se element, který má id="obrazek"
DIV má onload pouze u takových lidí, jako peta, jiným to nefunguje. Zkus to pověsit na onload stránky, ale nevím, kdy nastane, myslím tím natažení obrázků a pozadí. Pokud to bude dělat problémy, musel jde využít událost onload obrázku full.jpg a třeba ho vypozicuj 1000px doleva, aby nebyl vidět.

peta
Určitě to nezkoušej, stránka má 490 bajtů a obrázek má 346 kB. Holt script nepsalo čuně a proto stránka i se scriptem nemá 1k, ale polovic.
Mufna
Profil
Joker
Pozadí je samozřejmě jpg - gif by byl daleko větší, nehledě na omezení počtu barev (mám tam nějaké jemnější barevné přechody).

V JS se nevyznám, ale zatím jsem si zkusil sestavit kostru ev. JS. Poradíte mi, jak ho dodělat ? Možná, že to jde proti tomu nebo trochu jinudy, než co píšete (začít ten druhý načítat na onload prvního). Pracuji pouze s druhým obrázkem s tím, že zpoždění 3 sec. považuju za dost dlouhou dobu na to, aby se ten první už stihl načíst (a zobrazit). Bohužel tu funkci "delay" asi sám dohromady nedám. A chybí mi tam i definice "newImage ()"

<script type="text/javascript">

// create an image object

objImage = new Image();

// set what happens once the image has loaded

objImage.onLoad=delay();

// preload the image file

objImage.src='projekty/pranicka/semafor.gif';

// delay displaying image

setTimeout("delay()", 3000)

function delay() {
...............
...............
}

</script>

Moc díky za příp. pomoc !
Mufna
Profil
Bubák

Díky, jdu to vyzkoušet
Mufna
Profil
Bubák

Jo, moc díky, funguje to :-)
peta
Profil
Bubák
budu pamatovat urazeni a vratim :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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

0