Ajouter dynamiquement attribut async

bonjour

j'ai deux scripts que je veux seulement charger en async quand l'ecran depasse une certaine taille
<script id="premier" async data-src="premier.js"></script>
<script id="second" async data-src="second.js"></script>

pour cela quand l'ecran depasse une certaine taille je renome data-src et src
comme ceci

var t = document.querySelector("#premier");
var u = document.querySelector("#second");
t.src = t.dataset.src;
u.src = u.dataset.src;

ca fonctionne correctement

1: avec le validator html5 j'ai ce message
Error: Element script must not have attribute async unless attribute src is also specified or unless attribute type is specified with value module.
en retirant l'attribut async je n'ai plus de message d'erreur du validator

aussi est-ce que remplacer l'ensemble par ce qui suit ajouterait correctement l'attribut async

<script id="premier" data-src="premier.js"></script>
<script id="second" data-src="second.js"></script>

var t = document.querySelector("#premier");
var u = document.querySelector("#second");
t.async = true;
u.async = true;
t.src = t.dataset.src;
u.src = u.dataset.src;

ou faut il le renseigner comme suit?
t.setAttribute('async', '' );
u.setAttribute('async', '' );

2: autre question savez vous si renommez les data-set en rajoutant la class script au deux scripts comme ceci serait d'une execution plus rapide?

var e,
    t = document.querySelectorAll(".script");
for (e = 0; e < t.length; e += 1) t[e].src = t[e].dataset.src;

**quelle est pour vous la meilleure methode en terme de rapidite d'execution pour renommer le data-src en src et ajouter l'attribut async
merciii
Modifié par nantais (24 Apr 2022 - 19:08)

nantais a écrit :
bonjour

j'ai deux scripts que je veux seulement charger en async quand l'ecran depasse une certaine taille

<script id="premier" async data-src="premier.js"></script>
<script id="second" async data-src="second.js"></script>

1: avec le validator html5 j'ai ce message
Error: Element script must not have attribute async unless attribute src is also specified or unless attribute type is specified with value module.
en retirant l'attribut async je n'ai plus de message d'erreur du validator

Je dirais que si tu injectes le src en js, le validateur ne le sait pas, il t'indique donc une erreur, qui est corrigé par ton script. Donc à priori, pas de soucis. (et puis, cette erreur n'a pas d'incidences, la balise est vide.)

Ensuite, un part un ou dans une boucle, pour 2 éléments, il n'y surement pas d’inquiétudes à avoir. L'avantage de la boucle, c'est que si tu en ajoute un troisième ou en enlève un , tu n'auras pas à retouché ton script.

cdt
Modifié par gcyrillus (24 Apr 2022 - 21:56)

merci pour ton avis donc je ne me soucis pas du validateur
Modifié par nantais (24 Apr 2022 - 22:28)