Flicker à l'écran Response.redirect

Question

J'ai un problème où l'écran devient blanc pour un millième de seconde sur une redirection lors du rendu de la nouvelle page.

Cela provoque l'écran scintille et me contrarie ainsi.

J'ai eu un petit scoot autour du web et ont trouvé cette solution IE qui fonctionne sur IE mais il ne fonctionne pas sur le chrome ou FireFox.

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" /> 
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" /> 

Plus je suis sûr que l'utilisation de cette méthode aura des répercussions sur les panneaux de mise à jour et les contrôles Ajax.

Est-il possible de configurer le serveur pour afficher la page complète avant de lui donner le client afin de ne pas avoir cette milliseconde blanche qui fonctionne pour tous les navigateurs.

Toutes les idées seront les bienvenues.

Answer 1

Est-il possible de configurer le serveur pour afficher la page complète avant de lui donner le client

réponse courte: non. Voilà comment fonctionne un navigateur Web.

même avec les serveurs les plus rapides possibles (en utilisant des pages mises en cache statiquement comme vous les décrivez), vous ne faites que réduire le temps "blanc" moyen, sans les éliminer tous ensemble. Comme vous le voyez avec IE, cette transition de page par défaut fait partie du code du navigateur, pas quelque chose que le serveur contrôle. Si vous écrivez votre propre navigateur, vous pouvez l'écrire pour laver le noir, laver le blanc ou maintenir la transition jusqu'à ce que la page entière soit chargée, comme le fait IE. Comme d'autres personnes le mentionnent, réduire la taille de la page diminue le temps «blanc». cette fois est non seulement le temps que le serveur prend pour générer la page, mais aussi tout le temps de déplacement du réseau pour la page, les images, javascripts, css, etc ... c'est pourquoi vous ne pouvez jamais vous en débarrasser complètement. des trucs.

et je ne parle pas de quelque chose "côté client". ça ne marchera pas. le code "côté client" n'est même pas téléchargé, et encore moins en cours d'exécution, lorsque le navigateur décide de laver la toile en blanc. c'est une sorte de partie standard de «l'internet» à laquelle tout le monde s'habitue; il n'a pas été conçu pour être un visualiseur de diaporama ou un moteur de rendu graphique parfait. Malheureusement, si vous vous souciez tellement des transitions, le HTML n'est probablement pas le bon moyen pour votre travail.

Answer 2

Par défaut, le serveur tamponner la réponse complète avant de l'envoyer. Le "blanc" sera le résultat du contenu du HTML, éventuellement de sa taille. Utilisez un outil tel que Firebug ou IE Developer Tools (ma préférence est Fiddler) pour examiner le contenu généré. En un clin d'œil, vous avez un très gros ViewState.

Answer 3

Les exemples MSDN recommande de mettre

Response.BufferOutput 

avant d'appeler

Response.Redirect("http://www.mydomain.com/default.aspx"); 

Vous pouvez également essayer d'utiliser

Server.Transfer("default.aspx", true); 

Answer 4

probablement mieux de le faire sur le côté client . Par exemple, vous pourriez avoir un div qui couvre toute la page et disparaît une fois que le DOM a été entièrement mis en place. En jQuery, quelque chose comme ceci:

$(document).ready(function() { $('#overlay').fadeOut(); }); 

Du point de vue UX mais il est peut-être un peu déconcertant. En fait, je préfère un peu de scintillement, donc je sais que les choses se passent.

Answer 5

Ce que vous voyez est une occurrence normale. Voici ce qui se passe lors d'une redirection:

• Le serveur envoie une réponse au navigateur (les redirections sont effectuées côté client).
• Le navigateur charge la réponse, voit qu'il ya une redirection et arrête la charge page
• Le navigateur charge la nouvelle page

Les balises meta que vous utilisez sont IE uniquement, et n'affectera tout autre navigateur. Les seules choses qui élimineront le scintillement tous ensemble sera l'un des éléments suivants:

1. Vous avez dit que la redirection se produit lorsque l'utilisateur clique sur un bouton ou sur une ligne de grille ou quelque chose. Si cela devait déclencher une modification de location.href au lieu d'un post-retour, l'utilisateur ne verrait pas le scintillement du navigateur.

2. utilisation Server.Transfer (cela se traduira dans la barre d'adresse du navigateur montrant l'ancienne page au lieu de la nouvelle page (une redirection changera la barre d'adresse). Cela ne fonctionnera que si vous redirigez l'utilisateur vers une page sur la même serveur.

3. Envoyer une réponse HTTP 301 (Déplacé en permanence). Tis supprimera le scintillement, mais utiliser cette méthode avec précaution. il a d'autres effets (il peut effectuer le classement des moteurs de recherche).

Pour faire # 3, utilisez ce code sur le serveur

Response.StatusCode = 301; 
Response.StatusDescription = "Moved Permanently"; 
Response.AddHeader("Location", "NewLocation.aspx"); 

Answer 6

Désolé, je suis en retard à la fête! J'ai été aux prises avec cela sur mes applications pour longtemps. La solution que j'ai conçue fonctionne pour moi. Très bien comme ce que @ Pike65 suggéré ...

1. Créer un support pour une superposition:

<div id="overlayContent" class="overlay"> 
    <div id="loaderContent" class="loader"> 
     Loading... 
    </div> 
</div> 

1. CSS pour ce support:

.overlay { 
    position: fixed;  
    border: 0; margin: 0; padding: 0; 
    height: 100%; width: 100%; 
    top: 0; left: 0; 
    background-color: #272727; 
    text-align: center; vertical-align: middle; 
    z-index: 900; display: none; 
    -moz-opacity: 0.1; opacity: 0.1; 
    filter: alpha(opacity=10); 
} 

.overlay .loader { 
    position: relative; 
    width:40%; 
    margin: 20% auto; 
    padding: 10px; 
    background-color:black; 
    border: solid 1px gray; 
    color: #cccccc; 
    font-weight: bold; 
} 

1. Javascript (jQuery):

$('a, input[type=button]').live("click", function (e) { 
    $("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8); 
}); 

Voilà.Vous pouvez modifier le "js" à votre goût. Cela entraînera l'apparition d'une superposition translucide chaque fois qu'un lien ou un bouton est cliqué. Par nature de navigateur, il attendra jusqu'à ce qu'il obtienne une réponse pour la nouvelle page (en-têtes). Donc, il ne va pas disparaître la page actuelle jusqu'à ce qu'au moins quelque chose soit retourné pour la nouvelle page. Une fois qu'une nouvelle page commence à apparaître, elle supprime automatiquement la superposition!