You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore. Also note that it is almost always faster to load one (minified) file with all your javascript over your whole site.

Als je op een gegeven moment merkt dat je heel veel JavaScript plugins gebruikt kan je gaan denken om ze alleen in te laden wanneer nodig met Ajax. Als je met een CMS werkt waar je elke plugin niet op elke pagina nodig hebt kan je hier gebruik van maken om je website sneller te maken.

jQuery biedt voor dit doeleinde een makkelijke functie waarmee je dit kan bereiken:

$(document).ready(function() {
    $.getScript('link naar script',function(){
        //uit te voeren functie
    }
});

Met de functie getScript kan je een script inladen alsof je hem in de html had aangeroepen met , je houdt natuurlijk wel de dynamiek die JavaScript biedt om eerst te checken of je de plugin wel echt nodig hebt.

De uit te voeren functie is niet verplicht maar deze is vaak handig om gelijk een call te doen naar een plugin die je net hebt ingeladen, deze functie wordt pas uitgevoerd zodra het script helemaal is ingeladen.

In mijn blog gebruik ik een JavaScript gebaseerde syntax highlighter die mijn code (zoals hierboven) mooi opfleurt en kleurt. SHJS heb ik alleen op pagina’s nodig waar ik überhaupt code laat zien. Ik zet altijd al mijn code in

$(document).ready(function() {
    if ($('pre').length > 0))
    {
        $.getScript('shmain.min.js',function(){
                shhighlightDocument('/shjs/', '.min.js');
            })
    }
});

Ik moet ook de lengte van pre checken om te verifieren dat hij er echt is. jQuery geeft namelijk altijd een object terug, dit is de makkelijkste manier om te checken iets aanwezig is op de pagina.

Ik ga nog een stapje verder door alleen te checken of er een pre is op een post pagina, en niet op alle andere plekken van mijn website (WordPress only)

if (is_single()) {
    echo '';
}