简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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 » ?
P粉752290033
P粉752290033 2024-01-10 18:07:41
0
1
428

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

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 ?

P粉752290033
P粉752290033

répondre à tous(1)
P粉349222772
P粉3492227722024-01-11 16:07:11 1 plancher

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.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！