11521 sujets

JavaScript, DOM et API Web HTML5

Chargement conditionnel de script - Modernizr

Bonjour à tous.
Tout d'abord pardonnez moi pour mon manque de précisions car je suis un "codeur" amateur.

Je teste en ce moment l'utilisation des balises <picture> et <img> avec srcset.
Les résultats sont assez aléatoire selon les navigateurs.

Pour Safari ... pas bon.

J'ai donc testé quelques polyfills qui remplissent leur rôle (picturefill.js ou rempaillage.js)
Et je souhaiterais donc ne les télécharger que si la balise/propriété n'est pas prise en charge.

Or pour d'autre raisons j'utilise Modernizr. Avec la V2 la fonction Modernizr.load fonctionnait parfaitement pour les chargements conditionnels mais plus dans la V3 (qui par ailleurs détecte si <picture> est prise en charge).

Auriez-vous une idée, suggestions ?

PS. J'ai vu head.js mais je voudrait ne pas multiplier les scripts et j'ai lu que le bénéfice de ce script (qui fonctionne) n'était pas flagrant.

MERCI.
Salut,
Je crois que yepnope.js n'est plus à utiliser car déprécié depuis plusieurs années au profit de Modernizr.

La nouvelle version de ce dernier (https://modernizr.com) permet encore de tester une propriété/balise dans ton script JS.
Tu peux le faire de cette manière si tu veux tester le support de <picture> :
if ( ! Modernizr.picture) {
   //chargement de ton polyfill uniquement si "picture" n'est pas pris en charge
  }

Tout est sur cette page : https://modernizr.com/docs
A toi ensuite de voir pour charger dynamiquement un script depuis un autre...
Modifié par MatthieuR (15 Sep 2015 - 15:34)
MatthieuR a écrit :
Je crois que yepnope.js n'est plus à utilisé car déprécié depuis plusieurs années au profit de Modernizr.

Ah au temps pour moi, ce ne devait pas être écrit assez gros (et EN ROUGE) sur le lien que j'ai donné ! XD
De ce qu'ils expliquent, yepnope est maintenant intégré à Modernizr.load...
Modifié par SolidSnake (30 Sep 2015 - 11:02)
SolidSnake a écrit :

Ah au temps pour moi, ce ne devait pas être écrit assez gros sur le lien que j'ai donné ! XD

Smiley eek
SolidSnake a écrit :

De ce qu'ils expliquent, yepnope est maintenant intégré à Modernizr.load...

Oui, je crois que c'est ça...
Salut et merci de vos retours.

Bien que déprécié j'ai essayé Yepnope avec Modernizr mais cela ne fonctionne pas.

J'ai alors essayé la fonction proposée par MatthieuR mais je dois avoir un problème de syntaxe car cela ne fonctionne pas non plus.
Je précise que je suis assez proche d'être une bille au niveau javascript ...

Merci.
Modifié par Damino (29 Sep 2015 - 11:20)
Salut. Du coup comme tout cela foire mais que j'utillise jQuery et que Mordernizr me rajoute une classe 'no-picture" à ma balise HTML si l'élement <picture> n'est pas pris en compte, j'ai tenté cela :

$("html.no-picture head").append("<script src=\"picturefill.js\">");


Que j'aurais pu aussi écrire : 
if ( $("html").hasClass("no-picture") ) {
	   $("head").append("<script src=\"picturefill.js\">");
  };


Et ça fonctionne. Est-ce bien orthodoxe, performant ?

[EDIT]Cela ne fonctionne que sur Safari ...
En effet sur Opéra, Firefox et Chrome le <script src="picturefill.js"></script> est bien généré dans le <head> mais pas chargé
[\EDIT]
Modifié par Damino (29 Sep 2015 - 13:03)
Bonjour,

Utilise plutôt la méthode getScript() de jQuery, cela fonctionnera pitêtre mieux :
$.getScript( "picturefill.js" )
Sujet clos
Aller à