Discussion :

[Invité]

Bonjour,
Pour optimiser le chargement de mes pages je souhaite mettre tout mes fichiers Js en fin de page.
Donc j'ai déplacer mes appels avant le </body>
Par contre ma configuration d'un plugins jquery ne fonctionne.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function($) 
{
$(".slider").slideshow(
{
width      : 960,
height     : 360,
transition : "squareRandom"
});
});
</script>

Comment faire marcher ce script ?
faut il le mettre en haut ou puis je le mettre en bas de page ?

Merci de votre aide

[Kaamo]

Utilise window.onload = function() { ... } plutôt que $(document).ready(...).
En effet, ce dernier (propre à jQuery d'ailleurs) va se lancer quand le document sera chargé sans se soucier si les autres ressources (images, script, etc) le sont. Tandis que window.onload est déclenché à la fin de tout ce qui est à charger dans la page.
Pour optimiser le chargement de tes scripts, je te conseille de te pencher du coté de async ou encore defer. Je ne pense pas que les mettre à la fin soit une si bonne idée que ça.

Par exemple, ceci bloque le rendu de la page le temps de charger le script

Code javascript :

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

<script src="script.js"></script>

tandis que ce code,

Code javascript :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.async = true; po.src = 'script.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

ce qui équivaut à <script src="script.js" async></script>. En effet, le script sera chargé puis exécuté en parallèle du chargement de la page. C'est plus propre que le mettre à la fin du document, selon moi.

Enfin, le defer permettrait de charger le script en parallèle mais l'exécuter quand le document est prêt.

[Invité]

j'ai testé le

Code :

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

window.onload = function() { ... }

en mettant en bas de page mon script et mes fichiers js et j’obtiens cette erreur :
ReferenceError: jQuery is not defined

[Kaamo]

oui, il faut bien sûr l'adapter

Code javascript :

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

window.onload = function($) { ... }

[Invité]

Oui bien entendu j'ai aussi fait le test en rajoutant le $, j'ai aussi testé plusieurs combinaisons, mais mon slider ne fonctionne toujours pas, je seche.

[arnogues]

Oui bien entendu j'ai aussi fait le test en rajoutant le $, j'ai aussi testé plusieurs combinaisons, mais mon slider ne fonctionne toujours pas, je seche.

Si tu mets jquery en fin de page, le problème c'est que ton $ ne fonctionnera pas

Pour ma part, j'aurai fait un truc dans le genre :

On sait qu'on a parfois besoin d'un script en début de page, comme par exemple HTML5shiv ou autre.

donc dans mes pages j'ai un script de départ

Code :

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

<script src="head.js"></script>

Dans ce head.js pourquoi ne pas avoir un tableau dans lequel tu pusheras tes actions du domready dedans :

Code :

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

1
2
 
var domReadyArray=[];

Et dans ta page tu fais :

Code :

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

1
2
3
domReadyArray.push(function() {
   //le code de la fonction
});

Et ensuite à la fin de la page après l'appel de jquery :

Code :

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

1
2
3
4
5
 
(function() {
var a = domReadyArray.reverse();
while(a.length) a.pop()(); //oui on appelle pop qui retourne notre fonction et on éxécute immédiatement notre fonction.
})();

[Invité]

Outch, c'est bien compliqué tout ça.
Mois qui voulais Obtenir un A avec Yslow, je vais me contenter d'utiliser minify pour concaténer mes js et css et les laisser en haut.