8768 sujets

Développement web côté serveur, CMS

[Résolu] Chargement js

bonjour
je voudrais que ce js ne soit PAS chargé pour les petits écrans (-de 900px)
une instruction dans le html <script src..?
un @media css?


<!-- js -->
<script defer src="js/pluie2+time.js"></script>

une idée?
merci

(il faudra peut être déplacer le sujet.)
Modifié par drphilgood (13 May 2024 - 11:47)
Salut,
je le fait pour les polices spéciales, que je supprime en mode mobile à cause de leur poids et de leur présence peu pertinente sur ces appareils. Mais je ne sais pas si tu pourrais adapter avec de JS.
@media (min-width:36em) {
@font-face {
  	font-family:'PolicePerso';
  	font-style:normal;
  	font-weight:400;
  	src: url('satisfy-v11-latin-regular.woff2') format('woff2'); 
       	font-display: swap;}
}

Il faudrait peut-être déporter ton script dans un fichier js et remplacer @font-face de mon code par ce fichier script.
À essayer.
JavaScript sur des écrans de moins de 900px, vous pouvez utiliser une approche basée sur JavaScript plutôt que CSS. Ajoutez ce code JavaScript directement dans votre balise <head> ou juste avant la fermeture de votre balise <body> :

if (window.innerWidth > 900) {
var script = document.createElement('script');
script.defer = true;
script.src = 'js/pluie2+time.js';
document.head.appendChild(script);
}

Ce script vérifie la largeur de l'écran et charge le fichier JS uniquement si elle dépasse 900 pixels. CSS @media ne permet pas de gérer le chargement conditionnel de scripts.
tu peux tester la largeur du périphérique avec Js et injecter le cas échéant le code Html d'une balise script dans ton code Html...



j'utilise souvent une fonction de ce type



/* *************************************************************  */
/*      function viewport: calcule dimensions viewport             */
/* *************************************************************  */
function viewport() {
	var e = window, a = 'inner';
	if (!('innerWidth' in window )) {
		a = 'client';
		e = document.documentElement || document.body;
	}
	return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}


après il suffit d'interroger viewport().width pour avoir la largeur

je me sers de ça pour fabriquer des équivalents de media-queries en Javascript
Bongota a écrit :
Bah, je ne savais pas tout ça Smiley decu
Quand j'en aurai besoin, je ne perdrai pas de temps avec les @media.


les @media ne sont pas une perte de temps, c'est juste qu'elles ne s'appliquent QUE au Css....
Prévenir un modérateur
Répondre au sujet
Aller à