UpdatePanel - Des idées sur la façon d'éviter un scintillement dans l'interface utilisateur? - ASP.NET/Jquery

Question

J'ai plutôt une interface utilisateur complexe. Cependant, pour les besoins de cette question, disons qu'il existe une table HTML qui affiche UILayout1 par défaut (disons le mode par défaut). Un bouton permet à un utilisateur de basculer entre le mode par défaut et un mode de prévisualisation (UILayout2)

En mode de prévisualisation, certaines colonnes du tableau sont invisibles et les rangées sont réorganisées. J'utilise JS (jquery) sur la charge pour vérifier le mode et le modifier en conséquence.

La table et le bouton bascule sont dans UpdatePanels.

Fonctionnellement, tout fonctionne comme prévu. Toutefois, lorsqu'un utilisateur bascule entre le mode par défaut et le mode de prévisualisation ou inversement, il existe un intervalle de temps court pendant lequel la table s'affiche par défaut, puis JS s'exécute pour apporter des modifications.

Cela entraîne une dégradation de l'interface utilisateur. Existe-t-il des moyens créatifs d'éviter ce "scintillement"?

Answer 1

vous pouvez utiliser DIVs ou ne pas utiliser le panneau de mise à jour dans votre génération d'interface utilisateur utiliser tout concept autre

Answer 2

Le problème est susceptible d'être que votre code est en cours d'exécution de la charge. Je suppose que vous faites cela en utilisant la méthode jQuery standard d'exécution du code sur la charge, et n'utilisant pas l'événement onload de la fenêtre. En tout cas, même en utilisant jQuerys $(document).ready(...) sera trop lent si vous avez beaucoup d'autres fichiers javascript à charger, car l'événement .ready n'est pas déclenché sur le document jusqu'à ce que tous les javascript inclus ont chargé.

Vous devriez être en mesure de contourner le problème en incluant votre code qui modifie la table juste après le code HTML de la table dans votre page et ne fonctionne pas sur la charge à savoir vous assurer de ne pas envelopper dans $(document).ready(...);

Pour que cette approche fonctionne, vous devez avoir tout le javascript requis par le code qui modifie le tableau inclus plus tôt dans la page.

Si vous avez d'autres fichiers javascript non essentiels inclus, vous devriez essayer de les inclure plus tard dans la page. Je ne suis pas sûr à 100% que le fait d'être dans un panneau de mise à jour l'affectera - vous devrez vous assurer que votre code est re-déclenché lors de la mise à jour, mais je crois que tout devrait se faire automatiquement.

Answer 3

Votre interface utilisateur est probablement contrôlée par CSS? Vous pourriez être en mesure de se débarrasser de la vacillante en ajoutant quelque chose comme ça au début de votre JavaScript ou dans la < tête > de votre HTML:

if (previewMode) { 
    document.documentElement.className = 'preview'; 
} 

Ensuite, si vous modifiez vos règles CSS applicables à votre aperçu mode pour refléter l'élément HTML ayant la class = « preview » à quelque chose comme:

.preview table .defaultMode { 
    display:none; 
} 

, espérons votre table devrait rendre correctement la première fois et ne doivent être redessinées.