Discussion :

[bleuw]

J'utilise Modernizr pour charger tous mes scripts JS et CSS dans un ordre spécifique avec des fonctions callbacks pour gérer les dépendances entre les scripts.
Mais je rencontre un problème avec le chargement de Bootstrap (pas directement lié) qui utilise JQuery.

J'ai 3 niveaux de chargement :

1) JQuery
2) scripts utilisant JQuery mais n'ayant pas besoin que le document soit chargé
3) scripts utilisant JQuery ET ayant besoin que le document soit chargé

J'obtiens cette erreur dans Firebug : TypeError: l is not a function bootstrap.min.js (ligne 4)

JQuery a l'air de ne pas se charger avant l'exécution de Bootstrap.

Est-ce que quelqu'un a une idée ? (pour résoudre le problème ou proposer une autre solution pour effectuer la même chose : accélérer le chargement des pages en chargeant les scripts si besoin).

Merci pour votre aide.

Le code du head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript" src="js/modernizr-2.6.1.min.js"></script>
 
<script type="text/javascript">
 
    Modernizr.load([{
        load: 'http://code.jquery.com/jquery-1.10.2.min.js',
        complete: function(){
 
            Modernizr.load([
                //scripts using JQuery but not needing that the document is loaded
                'bootstrap/js/bootstrap.min.js',
                'js/plugins/respond/respond.min.js',
                'js/plugins/jquery-ui/jquery-ui-1.8.23.custom.min.js',
                'js/plugins/easing/jquery.easing.1.3.js',
                'js/plugins/parallax/js/jquery.stellar.min.js'
            ]);
 
            $(function(){
                //scripts using JQuery AND needing document loaded
                Modernizr.load([
                    {
                        test : Modernizr.touch,
                        yep : 'js/plugins/toucheeffect/toucheffects.js'
                    },{
                        test : $('.camera_wrap').length,
                        yep : {
                            'js':'js/plugins/camera/camera.min.js',
                            'css':'js/plugins/camera/css/camera.css'
                        },
                        complete : {
                            'js': function(){
                                $('.camera_wrap').camera();
                                console.log("plugin loaded!");
                            }
                        }
                    }
                ]);
            });
        }
    }]);
</script>

[ascito]

je procède comme ca moi, cela fonctionne bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	yepnope({
			load: [
				   '/ressources/jquery/jquery-1.10.2.js',  
				   'ressources/bootstrap/js/bootstrap.js', 
				   '/ressources/utils/sizzle.js',
				   '/ressources/utils/underscore.js',
				   '/ressources/utils/backbone.js',
                                   '/ressources/utils/app.js',
				   ],
			 callback: {
				'/ressources/utils/app.js': function () {
                    		// la je relance au besoin un yepnope pour les des ui / widget spécifique à la page		
 
                        }
			} 
		});

[bleuw]

Un "alerte(jQuery)" au début de la première fonction callback fonctionne donc JQuery est chargé donc je ne comprends pas pourquoi Bootrstarp ne fonctionne pas correctement...

Merci pour ta réponse ascito.

Ça m'a permis de mettre en lumière un problème en adaptant ta façon de procéder. Dans le code suivant Bootstrap ne retourne aucune erreur puisque chargé au même niveau que JQuery.
Mais maintenant c'est le plugin Camera qui me retourne la même erreur puisque situé dans le callback tout comme Bootstrap dans le code précédent....
Malheureusement, j'ai besoin du chargement du document, donc de jQuery, donc du callback pour exécuter Camera => test : $('.camera_wrap').length
Si quelqu'un a une idée... ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Modernizr.load({
    load : [
        'http://code.jquery.com/jquery-1.10.2.min.js',
        'bootstrap/js/bootstrap.min.js',
        'js/plugins/respond/respond.min.js',
        'js/plugins/jquery-ui/jquery-ui-1.8.23.custom.min.js',
        'js/plugins/easing/jquery.easing.1.3.js',
        'js/plugins/parallax/js/jquery.stellar.min.js'
    ],
    complete : function(){
        $(function(){
 
            Modernizr.load([
                {
                    test : Modernizr.touch,
                    yep : 'js/plugins/toucheeffect/toucheffects.js'
                },{
                    test : $('.camera_wrap').length,
                    yep : {
                        'js':'js/plugins/camera/camera.min.js',
                        'css':'js/plugins/camera/css/camera.css'
                    },
                    complete : {
                        'js': function(){
                            $('.camera_wrap').camera();
                            console.log("plugin loaded!");
                        }
                    }
                },'js/custom.js'
            ]);
        });
    }
});