Discussion :

[gotcha5832]

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 :

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

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

[Watilin]

À vue de nez, je ne crois pas qu'il y ait quelque chose à faire de plus compliqué que ça :

Code :

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

1
2
3
4
5
if (window.innerWidth < 400) {
   ...
} else if (window.innerWidth < 600) {
   ...
} else ...

Tu vois l'idée ?

[SylvainPV]

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
<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é.

[gotcha5832]

Super merci bien,

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

Cependant entre:

Code :

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

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

et

Code :

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

if(window.innerWidth > 400){

quel est la dirrérence?

[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.

[gotcha5832]

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.

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

Et pour le script:

Code :

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

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

dois je faire:

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

[SylvainPV]

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

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

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>

[gotcha5832]

Merci c'est une solution interessante.

Et pour le script:

Code :

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

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

dois je faire:

Code :

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

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>

[SylvainPV]

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

Code :

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

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.

[gotcha5832]

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.

[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.

[gotcha5832]

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?

[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.