[JS] Jquery .load .fadein

[Verwijderd]

Hoi

Ik ben net begonnen met jquery, en loop al gelijk tegen het volgende probleem:

Ik probeer content in te laden, als deze nog niet geladen is een loader.gif te laten zien, en als de load klaar is, de content in te faden. Helaas werkt de fadein niet als de pagina langzaam laadt.

De volgende code heb ik nu:

code:

function loadcontent(contentdiv, url) {

    var theurl = "/DutchCreatives/" + url;
    
    $(contentdiv).fadeOut('1500',loadContent);   
    
    $(contentdiv).html('<p><img src="/DutchCreatives/images/ajax-loader.gif" width="220" height="19"></p>');
 
    function loadContent() {
      $(contentdiv).load(theurl,'', showNewContent());
    }
    
    function showNewContent() {
            $(contentdiv).fadeIn('1500');
        }
        
}

Deze roep ik aan op de volgende manier:

code:

<a href="#portfolio" class="active" onclick="loadcontent('#portfolio-content', 'portfolio/aanmaken')">Aanmaken</a>

Hoe krijg ik dit voor elkaar dat het netjes een fadein krijgt als de html is ingeladen ?

[Bosmonster]

Ik zou toch even naar je structuur en naamgeving kijken. Een functie loadContent in een functie loadcontent?

Daarnaast, voeg je events toe in het documentready event, ipv met onclick-attributen.

Als laatste je probleem nog even:

JavaScript:

$(contentdiv).load(theurl,'', showNewContent());

Dit voert de showNewContent() functie direct uit, ipv dat je een handler als callback meegeeft. Haal de haakjes weg dus..

[Verwijderd]

Ja dat was het probleem inderdaad, stupid.

voor de geinterreseerden:

code:

function loadContent(contentdiv, url) {

    var theurl = "/website/" + url;
    
    if(!($(contentdiv).length)) {
      alert("Het opgegeven element bestaat niet");
      return false;
    }
    
    
    $('#portfolio-loader').html("<img src='/website/images/ajax-loader.gif'>").fadeIn('500');
    
    $(contentdiv).fadeOut('500',getContent);       

    function getContent() {
      $(contentdiv).load(theurl,'', showNewContent);
    }
    
    function showNewContent() {
            $(contentdiv).fadeIn('800', hideLoader);
        }
        
        function hideLoader() {
      $('#portfolio-loader').fadeOut('500');
    }
        
}