Appel fichier js en fin de page

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:

---

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

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:

---

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

---

tandis que ce code,

Code:

---

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.

j'ai testé le

Code:

---

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

oui, il faut bien sûr l'adapter ;)

Code:

---

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

---

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.

Citation:

---

Envoyé par christobale

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:

---

<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:

---

1 2	var domReadyArray=[];

---

Et dans ta page tu fais :

Code:

---

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:

---

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. })();

---

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.