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