Chargement conditionnel par résolution

Version imprimable

Bonjour à tous.

Travaillant sur un version Responsive je souhaiterais charger conditionnellement en fonction de la résolution.

Connaissez vous une technique qui permettrais de télécharger ou non en fonction de la résolution les script Fb, G+?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async=true; js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Merci

24/01/2014, 18h53
Watilin
À vue de nez, je ne crois pas qu'il y ait quelque chose à faire de plus compliqué que ça :
Code:

1 2 3 4 5 if (window.innerWidth < 400) { ... } else if (window.innerWidth < 600) { ... } else ...
Tu vois l'idée ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
if(window.innerWidth > 400){ // <-- met la valeur que tu veux ici
 
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async=true; js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
 
}
</script>

Attention toutefois, ce chargement adaptatif n'est valable qu'au chargement de la page. S'il faut réagir au redimensionnement de la fenêtre après chargement, c'est un poil plus compliqué.

25/01/2014, 11h56
gotcha5832

Merci

Super merci bien,

Effectivement cela ne prendra pas en compte le redimensionnement de la fenetre mais ca me va parfaitement.

Cependant entre:

Code:

if( window.width < 800 || screen.width < 800 ) {

et

Code:

if(window.innerWidth > 400){

quel est la dirrérence?
25/01/2014, 12h00
NoSmoking

Bonjour,
- window.width : c'est la fenêtre d'affichage que l'on peut redimensionner
- screen.width : là il s'agit de l'écran, sauf à le changer difficile de le redimensionner.

Merci encore

Donc dans l'objectif d'éviter de charger que les connexions "lente ne télecharge".
Donc en se disant que ca concerne les mobiles 3g, il est plus interessant de prendre le screen.with.

Il n'est pas possible de détecter le type de connexion?

Et pour le script:

Code:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

dois je faire:
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> if(screen.Width > 768){ (function(d){ var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); p.type = 'text/javascript'; p.async = true; p.src = 'http://platform.twitter.com/widgets.js'; f.parentNode.insertBefore(p, f); }(document)); } </script>
Merci

Il y a bien la Network Information API en cours de spécification qui donne la bande-passante disponible, mais le support est quasi-nul.

Éventuellement, ce que tu peux faire est de charger les modules sociaux une fois que toute la page est chargée. Tu peux ainsi mesurer le temps qu'a mis la page à se charger, et selon le temps que ça a pris choisir si tu veux charger les modules sociaux.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <head> ... <script> var initialLoadDate = Date.now(); window.addEventListener("load",function(){ var initialLoadTime = Date.now() - initialLoadDate; if(initialLoadTime < 5000){ //si la page s'est chargée en moins de 5 secondes //charger ici les modules sociaux } }); </script> </head>

Merci encore3

Merci c'est une solution interessante.

Et pour le script:

Code:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

dois je faire:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> if(screen.Width > 768){ (function(d){ var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); p.type = 'text/javascript'; p.async = true; p.src = 'http://platform.twitter.com/widgets.js'; f.parentNode.insertBefore(p, f); }(document)); } </script>

Le principe est le même pour Facebook, Google+ ou Twitter.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; if (callback && callback.call) { script.addEventListener('load', callback); } document.getElementsByTagName('head')[0].appendChild(script); } loadScript("monfichier.js", function(){ console.log("monfichier.js chargé et exécuté"); });
Mais je te recommande d'utiliser window.innerWidth plutôt. Attention aussi aux majuscules, le JavaScript est sensible à la casse.

27/01/2014, 10h13
gotcha5832

top

Merci beaucoup.

Juste une question.

Pourquoi préférer :
window.innerWidth à screen.Width ??

Sachant que finalement ce qui m'interesse le plus est la taille de l'écran plus que la fenetre.
Puisque si un desktop, connecté en ADSL, ouvre un fenetre en mini, cela ne me dérange pas qui charge les script.
27/01/2014, 13h26
SylvainPV

Simplement parce que l'objet screen ne fait partie d'aucun standard tel que défini par le W3C. De ce fait, on ne peut pas garantir que son implémentation soit générale et surtout homogène. Par exemple, sur IE cette valeur change selon le niveau de zoom de la page.

En pratique, seul l'espace disponible pour l'affichage, c'est à dire dans window, est une donnée utile pour le développeur. Dans ton cas, c'est un raccourci que tu fais pour évaluer la bande-passante. Il peut s'avérer faux, entre les super-mobiles 4G++ et les PC de la France profonde en connexion satellite.
27/01/2014, 13h39
gotcha5832

c'est clair

Un grand merci sont très clair.

Ok pour le screen vs window.

Concernant le deuxième point:
4g++ vs internet fixe profonde.

Du coup tu choisirais la solution donné ici:

Avec l'histoire du loadtime?
mais du coup je suis obligé de passer mers script dans le header?
27/01/2014, 19h33
SylvainPV

Oui, si l'idée est de ne charger que pour les connexions rapides, alors il faut tester la vitesse de connexion.

Tu n'es pas obligé de mettre tous tes scripts dans le <head>, l'important est d'avoir le script qui enregistre le premier "temps" le plus tôt possible, et l'évènement qui enregistre le second "temps" le plus tard possible. Plus il y a de délai et de requêtes entre le début et la fin de la mesure, plus la mesure sera précise et les fluctuations du réseau seront compensées par la moyenne. Enfin, il ne faut pas se leurrer, ça ne sera jamais ultra-précis.

Puisque le code HTML est chargé et interprété de haut en bas, le script que je t'ai indiqué est à mettre dans <head>. Pour les autres tu fais comme tu veux du moment d'avoir un temps de mesure significatif. L'évènement window.onload lui sera déclenché lorsque tous les éléments de la page seront chargés.