Delay på CSS bestämmelser via Javascript

Jag har en Slidefunktion med ramverket Mootools som jag döljer med Javascript (om man inte har javascript aktiverat visas det som ska slidas fram).

Men när man laddar sidan så visas innehållet i slidefunktionen för att sedan snabbt försvinna, så att det hoppar till.

Blir det så för att Mootools är för segt att laddas?

Döljer sliden med:

$('filter-container').setStyle('display', 'none');
var dsSlide = new Fx.Slide('filter-container');
dsSlide.hide();

som ligger i: window.addEvent('domready', function(){

Orginalkod: http://demos111.mootools.net/Fx.Slide

Redigerad av Oggeh
Anledning:

Eftersom domready eventet triggas först efter att webbläsaren har läst alla dom objekt (därav namet dom Ready) så bli det lite fördröjning med inläsningen av mootools + ditt content.

Det du kan göra är att låta mootools ladda in så fort den kan, och direkt inkludera dina koder för domReady, sen om du har andra JS koder körs dessa efter domreadyn.

Aha, på så vis. Lade det i window.onload = function(){ istället, men blir också en delay. Spelar det någon roll om man laddar stilmallen före javascript filen i själva html dokumentet?

domready är snabbare än onload, onload väntar på samtliga filer (bilder mm).

Stilmallen spelar ingen roll direkt, best practice säger att javascript skall laddas in senare än innehållet (yslow), Javascript, css filer sparas med cache (webbläsarens) så det borde inte vara så farligt efter första besöket att man upplvere "hoppandet".

Det kanske inte går att undvika att det hoppar till medan sidan laddas? (förutom att dölja sliden direkt i CSS:en så folk utan Javascript inte ser det) :/

du kan ju alltid lägga in <script> element efter de element du vill dölja som triggars direkt och dölja objekten:

<div ...>....</div>
<script>... hide div above ...</script>

Lycka :D Funkade fint, hittade även att slidefunktionen lade till margin: 5px 0; i en wrapper runt det hela.

Tack igen voigtan =)