11496 sujets

JavaScript, DOM et API Web HTML5

Charger javascript en fonction de la résolution

Bonjour,

Tout est dans le titre. Je cherche le moyen de charger un fichier javascript, sauf pour les petites résolutions d'écran, un peu comme pour les déclarations d'une feuille de style css :
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />

Est-ce possible sans passer par le php ? :
<?php
if(isset($_GET['Largeur'])) {
   if($_GET['Largeur']) <=780){
      echo '';
   }
   else if ($_GET['Largeur']) >= 781){
      echo '<script src="js/scripts.min.js" async></script>';
   }          
}
?>


Merci
Oui je connais, d'ailleurs j'ai commenté cet article...

Seulement ce script ne répond pas en "live" mais au chargement de la page...

Merci tout de même.
Tu devrais le relire alors, puisqu'il est bien fait mention de se brancher sur des événements du type resize... En plein milieu de l'article :

// Fonction exécutée au redimensionnement
function redimensionnement() {
  var result = document.getElementById('result');
  if("matchMedia" in window) { // Détection
    if(window.matchMedia("(min-width:600px)").matches) {
      // Il y a de la place
    } else {
      // Il y en a moins...
    }
  }
}
// On lie l'événement resize à la fonction
window.addEventListener('resize', redimensionnement, false);


Bon courage !
Le problème pour moi est la gestion des résolutions en device sur mobile.

Avec ce script, pour lequel j'ajoute une classe diférente sur la balise html :
// Fonction exécutée au redimensionnement
function redimensionnement() {
  var result = document.getElementById('result');
  if("matchMedia" in window) { // Détection
    if(window.matchMedia("(min-width:600px)").matches) {

      // grande résolution :
      $('html').addClass('grande-resolution').removeClass('no-js');

    } else {

      // faible résolution :
      $('html').addClass('faible-resolution').removeClass('no-js');

    }
  }
}
// On lie l'événement resize à la fonction
window.addEventListener('resize', redimensionnement, false);

... on arrive à avoir les deux classes 'grande-resolution' et 'faible-resolution' en même temps sur la balise html.
Modifié par Olivier C (24 Sep 2013 - 08:03)
Qu'est-ce que ça donne en-dessous de 600px ?

As-tu tenté de mettre une condition à ton else ?
elseif(window.matchMedia("(max-width:600px)").matches) {}


Je n'ai jamais eu besoin d'un tel fonctionnement donc je ne suis sûr de rien, mais des conditions excluantes me sembleraient plus logiques.
Olivier C a écrit :
Bonjour,

Tout est dans le titre. Je cherche le moyen de charger un fichier javascript, sauf pour les petites résolutions d'écran, un peu comme pour les déclarations d'une feuille de style css


Salut,

Moi j'utilise quelque chose dans ce goût là :


if(window.innerWidth>680) {
var bigjs = document.createElement('script');
bigjs.src = 'js/monscript.js';
bigjs.type = 'text/javascript';
document.getElementsByTagName('body')[0].appendChild(bigjs);
}


Edit : Mais effectivement ce système ne fonctionne pas si tu veux charger le script uniquement en live lorsque la taille de la fenêtre change ...
Modifié par yank (26 Sep 2013 - 10:07)
Merci à vous. Je tente diférentes solutions, celles proposées et d'autres, je prends mon temps pour trouver une solution. C'est pour la préparation de mon prochain thème : le script de repositionnement des div (freetile.js) est lourd et surtout inutile en mode petite résolution...
Bonjour,

Au risque de déterrer un vieux sujet, je vais apporter un élément de réponse concernant le point soulevé par Olivier C :
Olivier C a écrit :
on arrive à avoir les deux classes 'grande-resolution' et 'faible-resolution' en même temps sur la balise html.

Ton code :
 // grande résolution :
      $('html').addClass('grande-resolution').removeClass('no-js');

Ici, à aucun moment tu ne supprimes la classe 'faible-resolution'.
J'ai simplement ajouté :
 // grande résolution :
      $('html').addClass('grande-resolution').removeClass('no-js').removeClass('faible-resolution');

En appliquant la même logique pour le else, le changement de classe fonctionne bien au redimensionnement, sans conflit de classe.

En espérant ne pas arriver trop longtemps après la bataille,
Bonne journée !
Sujet clos
Aller à