jQuery loading bar

[KoBolD54]

Voor een website met veel foto's wil ik graag een loading bar hebben totdat alle foto's op de pagina geladen zijn.

Omdat ik geen tot weinig ervaring heb met jQuery - maar je het hiermee wel makkelijk zou moeten kunnen - ben ik er vandaag maar eens aan begonnen. Na heel wat lees werk en voorbeelden ben ik denk ik al een heel eind gekomen. Echter kan ik geen oplossing vinden voor mijn specifieke wens.

Ik heb een DIV met id "navigation" waar al mijn menu items in zitten. Wanneer er op één van deze items geklikt wordt wil ik dat de pagina helemaal ingeladen wordt en totdat deze helemaal ingeladen is een andere DIV met id "loader" zichtbaar is. De ingeladen pagina moet vervolgens getoond worden in een DIV met id "content".

Het deel van mijn HTML ziet er als volgt uit

HTML:

<div id="menu">
                
    <ul id="navigation">
        <li><a href="home.php">Home</a></li>
        <li><a href="team.php"><li>Team</a></li>
        <li><a href="training.php"><li>Training</a></li>
        <li><a href="pictures.php"><li>Pictures</a></li>
        <li><a href="agenda.php"><li>Agenda</a></li>
        <li><a href="links.php"><li>Links</a></li>
        <li><a href="contact.php"><li>Contact</a></li>
    </ul>
                
</div>

<div id="loader"><p><img src="images/loader.gif" alt="Loading" /></p></div>
<div id="content">
    TEST
</div>

het deel van mijn CSS al volgt

Cascading Stylesheet:

#navigation {
    position: relative;  
    float: left;
    padding-left: 15px; 
}

#navigation li {
    float: left;
    display: inline;  
    list-style: none;
}

#navigation li a {  
    color: #FFFFFF;  
    position: relative;  
    z-index: 2;  
    float: left;  
    font-size: 14px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
    text-decoration: none;  
    padding: 15px 8px;  
}

en mijn jQuery ziet er als volgt uit

JavaScript:

$(document).ready(function() {
                           
    var hash = window.location.hash.substr(1);
    var href = $('#navigation li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.php';
            $('#content').fadeOut('fast',fadeInLoader);
            
            function fadeInLoader() {
                $('#loader').fadeIn('fast',loadContent);
            }
            
            function loadContent() {
                $('#content').load(toLoad,'',fadeOutLoader);
            }
            
            function fadeOutLoader() {
                $('#loader').fadeOut('fast',fadeInContent);
            }
            
            function fadeInContent() {
                $('#content').fadeIn('fast');
            }
            
            //$('#content').load(toLoad);
        }                                           
    });

    $('#navigation li a').click(function() {
                                  
        var toLoad = $(this).attr('href');
        $('#content').fadeOut('fast',fadeInLoader);
        
        function fadeInLoader() {
            $('#loader').fadeIn('fast',loadContent);
        }
        
        function loadContent() {
            $('#content').load(toLoad,'',fadeOutLoader);
        }
        
        function fadeOutLoader() {
            $('#loader').fadeOut('fast',fadeInContent);
        }
        
        function fadeInContent() {
            $('#content').fadeIn('fast');
        }
        
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);

        return false;
        
    });

});

Zoals je ziet is de code niet heel erg efficiënt maar ik weet op dit moment even geen andere manier om het te doen. Met deze code lukt het mij om een willekeurige pagina vanuit een .php bestand in te laden. De huidige pagina fade uit en een loading bar fade in. Vervolgens wordt de gekozen pagina ingeladen en de loading bar fade weer uit en de nieuwe geladen pagina fade in. Echter blijft de loading bar maar +/- 1 sec. staan en ook wordt de pagina niet eerst helemaal ingeladen.

Wat doe ik fout en hoe moet ik mijn code aanpassen zodat het wel werkt? Alvast bedankt voor jullie tijd/moeite.

[apokalypse]

Het is mij nieuw dat je een functie in een functie kan definiëren in JavaScript. Dit lijkt me niet helemaal de bedoeling en zie ik het voordeel er niet van, ik zie juist alleen code duplication.

Heb je een online voorbeeld? Wat heb je al geprobeerd?

[ Voor 8% gewijzigd door apokalypse op 31-05-2010 00:10 ]

[Mike2k]

Eensch.

Waar zijn al die functie declaraties voor ? Je kan ze toch gewoon allemaal onder elkaar zetten?

code:

$('#navigation li a').click(function() {
                                  
        var toLoad = $(this).attr('href');
        $('#content').fadeOut('fast',fadeInLoader);
        
        $('#loader').fadeIn('fast',loadContent)

        $('#content').load(toLoad,'',fadeOutLoader);

        $('#loader').fadeOut('fast',fadeInContent);
        
        $('#content').fadeIn('fast');
        
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);

        return false;
        
    });

[MueR]

Dit is toch eigenlijk een scriptrequest. Je code hier dumpen en zeggen "het werkt niet" is natuurlijk niet de bedoeling. Je zult moeten gaan debuggen, kijken waar het mis gaat en proberen uit te zoeken waarom.

apokalypse schreef op maandag 31 mei 2010 @ 00:10:
Het is mij nieuw dat je een functie in een functie kan definiëren in JavaScript.

Dan heb je toch een en ander gemist de afgelopen jaren.