Rendu de 20 grandes listBox identiques

Question

J'ai un tableau HTML avec des lignes (20 lignes). Chaque ligne contient une liste de pays (environ 250 pays) qui sont remplis à l'aide d'un seul ensemble de données de la base de données.

Le temps de chargement est assez rapide, mais le temps de rendu est vraiment en désordre. Y at-il un moyen d'accélérer le rendu de ces listes?

Answer 1

Vous pouvez charger une seule fois, puis copiez l'élément DOM partout où vous avez besoin ...

Je ne suis pas sûr que cela améliorerait beaucoup car il reposerait plus sur l'ordinateur de l'utilisateur, mais Je suppose que ça vaut la peine d'essayer si c'est trop lent comme c'est le cas en ce moment.

edit: voici comment je le ferais. À utiliser avec précaution, je ne l'ai pas testé et il y a très probablement des tonnes d'erreurs avec ce code, c'est juste pour vous donner une idée de ce que je disais.

<mylistbox id="listboxtemplate"> ... </> 

<div class="thisPlaceNeedsAListbox"></div> 
<div class="thisPlaceNeedsAListbox"></div> 
<div class="thisPlaceNeedsAListbox"></div> 

sur le document prêt, en utilisant jquery:

jQuery(".thisPlaceNeedsAListbox").append(jQuery("#listboxtemplate").clone()) 

Answer 2

Vous pouvez essayer d'ajouter la prochaine boîte de sélection uniquement après que l'utilisateur a sélectionné précédent (en utilisant JavaScript).

Je suis assez sûr que vous pouvez repenser le formulaire ou le processus, mais je ne peux rien suggérer de spécifique puisque vous n'avez pas donné assez d'informations. Par exemple, en fonction de la situation, vous pouvez utiliser multi-select ou un widget JavaScript de fantaisie.

EDIT en fonction de votre commentaire:

Alors que diriez-vous au service de la table sans sélectionner. Et si l'utilisateur clique deux fois sur un champ de pays, vous changez l'élément de texte pour sélectionner l'élément en utilisant javascript. Et une fois que l'utilisateur a sélectionné le pays, vous pouvez revenir à l'élément de texte. Vous pouvez soumettre les résultats au serveur en utilisant Ajax (après que l'utilisateur a sélectionné le pays) ou en utilisant des champs cachés un bouton de soumission. De cette façon, DOM ne contiendra jamais plus d'un élément select.

Vous pouvez transmettre des pays en javascript en utilisant l'objet/tableau JSON en ligne (dans les balises de script). Pour rendre les choses encore plus rapides après que l'utilisateur a édité le premier élément, cachez simplement (css: display: none;) le premier élément de sélection de construction et clonez/déplacez-le chaque fois que l'utilisateur veut éditer une ligne.

Comme vous pouvez le voir, il existe de nombreux chemins que vous pouvez suivre en utilisant cette approche, tout dépend de combien vous voulez optimiser/travailler dessus.