page Web rendu avant que toutes les données reçues

StackOverflow https://stackoverflow.com/questions/6821272

Question

J'ai actuellement une page Web qui prend un certain temps à la charge. Le côté php de la page fait beaucoup de traitement et de calcul des données, et c'est (malheureusement) inévitable. Je voudrais afficher quelque chose sur la page alors que le php est en train de traiter. Malheureusement, la majorité de la page dépend du calcul de php.

La solution actuelle, j'ai est le suivant:

Le code HTML / PHP (début): 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="preLoading.js"></script>
</head>
<body onload="onLoad()">
<?php
flush();
?>
<?php
// computation.
?>

Le javascript: 

document.write('<span id="loading">Please wait... Loading and processing data.</span>');

function onLoad() {
    if (document.getElementById) {
        var loading = document.getElementById("loading");
        loading.style.display="none";
    }
}

Il fonctionne bien dans le sens que si la page est rendu, il y a un petit message d'attente affiché alors que la page rend. Mais il ne fonctionne pas dans le sens que la page attend toujours toutes les données à recevoir avant de rendre quoi que ce soit. Comment puis-je accomplir ce dernier?

Une chose à noter:. La ligne blanche avant le doctype contient 1024 places, parce que je lis dans certains endroits (y compris StackOverflow) que les navigateurs attendent jusqu'à ce que la lecture d'un certain nombre de caractères avant de tenter quoi que ce soit à rendre

Toutes les idées serait appréciée. Les navigateurs sont remplis de trucs et Arcane hacks qui me mystifient.

Était-ce utile?

La solution

Essayez ceci: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type ="text/javascript" src="jquery.js"> </script>

<script type="text/javascript">  

$(document).ready(function(){
 $.get('data.php',
 function(output) {
 $('#dataDiv').html(output).fadeIn(250);
 });
});

</script>
</head>
<body>
<div id="dataDiv"> Please wait while loading... </div>
<?php
// computations placed in data.php file
?>

S'il vous plaît noter que ceci nécessite l'utilisation de jQuery et vous déplacer vos calculs php dans le fichier « data.php ».

Autres conseils

Un meilleur choix serait d'avoir que le squelette de la page envoyée, puis récupérer les données de calcul coûteuses par des appels AJAX. De cette façon, vous pouvez mettre en place une page d'espace réservé et remplissez les choses comme elles sont disponibles.

Le côté positif est que vous n'êtes pas dépendant de tampons de rinçage - qui ne garantissent pas que les données sera effectivement envoyé au client, seulement que la couche supérieure suivante dans la pile logicielle doit obtenir tout ce qui est bon maintenant disponible .

L'inconvénient est que maintenant, vous aurez au moins deux requêtes HTTP pour générer la page - un pour aller chercher le squelette de la page, et au moins un ou plus pour la demande AJAX (s) pour aller chercher le « remplir les blancs "données.

Essayez d'utiliser 

flush(); ob_flush();

comme indiqué dans le manuel php. Cela porte la sortie aussi proche du navigateur que possible.

Plus d'informations sur pousser le tampon au navigateur peut être lu dans le manuel php pour flush ();

  1. Pour essayer de commencer placer le message chargeur directement après la balise body. Ce navigateur devrait afficher ainsi le plus tôt possible.
  2. Vérifiez la configuration pour ne pas avoir la compression (par exemple gzip) par défaut.
  3. Ne pas utiliser les tables. Ils ne sont pas rendus avant complètement chargé.

Charger le contenu qui prend toujours avec un appel Ajax.

Vous devez activer tampon de sortie hors tension et sortie implicitement affleurant votre processus PHP fait son travail.

Vous pouvez Bufferisation . A noter également que le rinçage du tampon dépend du navigateur et combien il attend avant qu'il montre la sortie.

question connexe que vous pourriez trouver utile.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top