11499 sujets

JavaScript, DOM et API Web HTML5

Salut à tous !

Voilà la question sur laquelle je bute actuellement :

J'aimerais différer le chargement de la bibliothèque Jquery ainsi que le script associé afin que ceux-ci ne se lancent qu'une fois la page chargée.

La page Google PageSpeed donne une indication pour faire ça.
Malheureusement je ne m'y connais pas assez pour comprendre comment adapter leur astuce à ma page.

Google préconise "deferredfunctions.js" : https://developers.google.com/speed/docs/insights/BlockingJS

Comment puis-je faire cela pour mes 3 scripts ?

<script src="js/jquery-1.10.2.min.js" async></script>
<script src="js/Js_flexslider_min.js" async></script>
<script src="js/photobox_min.js" async></script>
<script>
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
<script>
		$('#gallery').photobox('a');
		// or with a fancier selector and some settings, and a callback:
		$('#gallery').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
		function imageLoaded(){
			console.log('image has been loaded...');
		}
</script>
</body>
</html>


Quelqu'un comprend comment faire ?

Merci par avance.
Modifié par Aessian (26 Sep 2013 - 12:20)
Je up une dernière fois ma question.

Quelqu'un peut-il m'aider à utiliser : "deferredfunctions.js comme préconisé par Google sur mes quelques scripts svp ?

J'avoue ne pas comprendre comment faire fonctionner tout ça.

Merci !
salut,
un moyen simple serait de créer un fichier JS à part qui se chargerait de créer dynamiquement tes balises <script> à intégrer.

function addEvent(a,b,c,d){d = d || !0;a.addEventListener?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

function pageLoaded(){
	var jquery = document.createElement("script"),
		flexslider = document.createElement("script"),
		photobox = document.createElement("script");
	
	jquery.src = "js/jquery-1.10.2.min.js";
	flexslider.src = "js/Js_flexslider_min.js";
	photobox.src = "js/photobox_min.js";
	
	document.body.appendChild(jquery);
	document.body.appendChild(flexslider);
	document.body.appendChild(photobox);
	
	alert(document.body.innerHTML)
}

addEvent(window, "load", pageLoaded, false);
Salut,

Si tes scripts se chargent juste avant la fermeture du body, ils ne sont plus très bloquants, c'est quand même bizarre...
Tu aurais une url en ligne disponible ?

tm