Brouillez les éléments HTML avant que le navigateur ne tente de les restituer. S'agit-il d'un cas d'utilisation rare et valide pour « document.write » ?
J'ai une zone d'en-tête sur ma page Web qui contient des images d'arrière-plan qui la parcourent.
Ils sont un peu haute résolution et sont au-dessus de la ligne de flottaison, donc je ne veux pas que le navigateur commence à charger des images autres que la première.
Mais je souhaite aussi randomiser l'ordre des images.
Le problème est que j'utilise un hébergeur statique (Netlify).
Quelques approches que j'ai envisagées :
- Placez les éléments dans le document comme d'habitude, puis utilisez Javascript pour les interroger et randomiser leur ordre. Je suis réticent car je pense que le navigateur a commencé à charger la première image qui arrive dans le HTML, puis elle est déplacée de manière aléatoire vers d'autres emplacements. Je veux éviter cette situation.
- Utilisez du code de serveur pour la randomisation. Mais je ne veux pas ; je n’exécuterais pas un serveur uniquement pour cette fonctionnalité.
- Écrivez chaque combinaison possible, ou au moins une poignée d'entre elles, dans un fichier HTML séparé et randomisez-la via la réécriture d'URL dans une fonction Edge. Cela a l'air un peu brouillon. Je ne veux pas utiliser de fonctions Edge si ce n'est pas nécessaire, car c'est juste un autre quota dont il faut s'inquiéter.
- Écrivez une logique dans la fonction edge pour intercepter la réponse de la page et la modifier. Même si le code lui-même sera plus encombré, les fichiers fournis le seront moins. Couplé à la même aversion pour les fonctions de pointe.
Ce que je veux faire, c'est exécuter du code JS, exécuter une courte logique et ajouter du balisage au flux avant que le navigateur ne voie l'intégralité de la réponse HTML. Je peux ensuite fournir une commande standard dans pour les personnes dont JS est désactivé et les moteurs de recherche qui ne souhaitent pas exécuter JS.
Je trouve que c’est exactement ce que fait document.write, n’est-ce pas ?
Toutes les sources disent de l'éviter comme la pestedocument.write. Mais je me demande s'il s'agit d'un cas d'utilisation valide et rare ?
<html>
<body>
<p>This seems to work, and I kind of think it's not a terrible idea.</p>
<script type="application/javascript">
// Standard Fisher-Yates shuffle; not relevant
function shuffle(array) { let i = array.length, j; while (i != 0) { j = Math.floor(Math.random() * i); i--; [array[i], array[j]] = [array[j], array[i]]; } return array; }
const paras = [
"<p>para 1</p>",
"<p>para 2</p>",
"<p>para 3</p>",
"<p>para 4</p>",
];
shuffle(paras);
document.write(paras.join(""));
</script>
<noscript>
<p>para 1</p>
<p>para 2</p>
<p>para 3</p>
<p>para 4</p>
</noscript>
<p>Change my mind.</p>
</body>
</html>
Est-ce une mauvaise idée ? Pourquoi? Existe-t-il une meilleure façon de réaliser mon souhait ?
