[Résolu] Charger JavaScript selon taille de l'écran

Salut à tous,

Suite aux conseils de ce site : http://wdfriday.com/blog/2012/04/introduction-a-la-performance-pour-le-web-mobile/ je tente de ne charger mes scripts JS uniquement si la taille de la fenêtre est supérieure à 680px avec ce script :

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

En l'occurrence un preloader. Malheureusement je n'ai pas l'impression que cela fonctionne.

Pouvez-vous me dire de votre côté si ça fonctionne ou pas ? Merci d'avance.

Le lien test
Modifié par yank (27 Jul 2013 - 09:20)

J'ai vu ta page et j'en conclue 2 choses :

- Un morse a les dents longues mais moins que le boss de Goldman Sachs
- Ton script foire, regarde les erreurs dans la console et corrige les

jb_gfx a écrit :
J'ai vu ta page et j'en conclue 2 choses :

- Un morse a les dents longues mais moins que le boss de Goldman Sachs
- Ton script foire, regarde les erreurs dans la console et corrige les

Merci pour ta réponse et tu as raison.

Malgré tout ça ne change pas le fait que cette manip ne fonctionne pas, par exemple en testant :

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

ça désactive le script peut importe la taille de la fenêtre.

Pourtant sur le site de Raphaël ce script "à l'air" de fonctionner en tout cas pour la partie Flickr.

WTF ?
Modifié par yank (24 Jul 2013 - 19:51)

Je bouge au resto suite à une invit de dernière minute. Si je reviens pas trop tard, sans la femme du patron et avec pas trop de verre de vins dans le cornet je regarderais ton code.

jb_gfx a écrit :
Je bouge au resto suite à une invit de dernière minute. Si je reviens pas trop tard, sans la femme du patron et avec pas trop de verre de vins dans le cornet je regarderais ton code.

c'est cool merci.

Pour info je m'en fiche du preloader, ce que je veux c'est "simplement" charger mes fichiers JS et en désactiver certains sur mobiles par exemple.

Bon vin

Désolé l'ami mais je viens de rentrer du resto et l'apéo au pastis accompagné d'une bouteille de bordeaux me disent qu'ont est pas prêt à coder. Faut pas m'en vouloir.

Hello,

A la base, il semble plutôt y avoir une erreur dans le script qui appelle le preloader (enfin plutôt dans ton script de preload en l'occurence) :

Console Firebug a écrit :
88 : TypeError: $(...).jpreLoader is not a function

Par contre, le test de la largeur de la fenêtre fonctionne puisque le script de preload n'est pas appelé pour les largeurs < 680.

Salut,

Effectivement il n'a "pas l'air" de charger quand je regarde dans Firebug.

Bizarrement je n'arrive pas à le faire fonctionner sur un autre script, en l'occurrence Jquery : http://bit.ly/14KRVUl

Le script désactive tout simplement jQuery peut importe la taille de l'écran ... Voilà ou je veux en venir, mon problème concerne ce petit bout de script que conseille plusieurs personnes :
http://www.thinkmobilefirst.net/content/5.html + http://goetter.fr/lab/mobile/content/5.html

Le but final est de déactiver la plupart de mes scripts JS sur les mobiles afin de gagner en chargement et rapidité d'affichage.

EDIT : Sur ce test, le script de scroll auto fonctionne bien sur écran de plus de 680px et est désactivé en dessous de cette taille : http://bit.ly/16cAfxx
Mais alors pourquoi n'est-il pas possible de faire la même chose avec jQuery ?

jb_gfx a écrit :
- Un morse a les dents longues mais moins que le boss de Goldman Sachs

Désolé j'ai viré mon morse au fait
Modifié par yank (25 Jul 2013 - 11:29)

Je pense avoir réussi à faire fonctionner la chose sur la plupart des scripts. Par contre certains scripts ne sont tout simplement pas chargés du tout peu importe la taille de l'écran (dont le script jQuery), cela doit venir du script en lui-même j'imagine ... ?

Autre question, est-il possible de mettre plusieurs scripts à la suite plutôt que de répéter mon script toutes les 5 lignes ?

Exemple

Au lieu de ça :

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

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

//...etc

Cela fonctionne aussi en faisant ça mais je pense que c'est crade comme façon de faire

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

Mais plutôt avoir quelque chose dans ce goût là ? :

<script type="text/javascript">   
if(window.innerWidth>680) {
var bigjs = document.createElement('script');
bigjs.src = 'js/script1.js','js/script2.js','js/script3.js','js/script4.js';
bigjs.type = 'text/javascript';
document.getElementsByTagName('body')[0].appendChild(bigjs);
}
</script>

Merci !
Modifié par yank (25 Jul 2013 - 20:52)