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 :
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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ouais, ce n'est pas une bonne idée. Cette méthode est très ancienne et possède un comportement spécifique qui peut varier d'un navigateur à l'autre. Voir https://developer.mozilla.org/en- US/docs/Web/API/Document/write pour plus d'informations.
Utilisez simplement des méthodes modernes telles que :
Attendez. Disposez les éléments de manière aléatoire car ils sont sécurisés pour le moteur de rendu/navigateur.
Une suggestion pour votre cas d'utilisation spécifique : le navigateur doit d'abord charger JavaScript pour qu'il fonctionne comme vous le souhaitez, mais cela peut ne pas se produire. Les images peuvent toujours être chargées dans l'ordre dans lequel elles sont apparues à l'origine dans la source HTML. Je recommanderais de déplacer cette logique vers le serveur si possible. En fin de compte, tout Javascript peut ne pas fonctionner pour votre cas d'utilisation. Il pourrait être possible de ne pas inclure les images dans le document lui-même et de les ajouter via JS (sur chargement aléatoire), ce qui serait mon approche préférée.