Le moyen le plus discret de lancer un appel Ajax après le chargement d'une page

[Locace]

Bonjour,

Je suis en train de créer une page assez légère. Sauf le bloc social qui repose beaucoup sur les API de Facbook, Twitter et Mailchimp.

Ce bloc plombe littéralement le temps de chargement de la page.

Mon idée de base est donc de charger la page sauf ce bloc. Puis de charger de bloc via un appel Ajax.

Le souci est qu'en faisant ça, le petit sablier à coté du curseur et dans l'onglet continuent de tourner. Le visiteur a donc l'impression que la page n'a pas fini de charger. Vous voyez ce que je veux dire ?

Comment feriez pour faire un appel ajax le plus discret possible ?

J'utilise jquery.

Merci beaucoup.

[SStephane]

$(document).ready(function(){
  $.ajax({
      url: "bloc.php",
      dataType: "html",
      success: function(_html){
         $('#ton_bloc').html(_html);
      }
   });
});

tout simplement non ?

[Locace]

$(document).ready(function(){
  $.ajax({
      url: "bloc.php",
      dataType: "html",
      success: function(_html){
         $('#ton_bloc').html(_html);
      }
   });
});

tout simplement non ?

Hello

Merci pour la réponse. En fait c'est la technique que j'utilise mais elle ne permet pas de cacher le petit sablier du curseur ni le sablier dans l'onglet du navigateur.

Je me demandais si il y a quelque chose de plus discret.

[SStephane]

Peux tu poster la source du html retourné par la requête ajax ou encore mieux, montrer ta page de test qu'il soit plus facilement possible de te proposer une solution en déterminant quel process est en cours ? A l'aveugle, c'est pas évident

[Locace]

Bah mon resultat est un bloc html tout ce qu'il y a de plus classique.

Disons que mon souci vient pas trop de mon code car il fonctionne.

En fait je voulais plutot savoir si il y avait des techniques plus avancées.

Edit : on peut surement s'inspirer de la facon dont Facebook charge son SDK javascript de manière asynchrone.

(function() {
        var e = document.createElement('script');
        e.async = true;
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());

De ce que je comprend, ça permet de charger un script de manière décalée. Par contre je n'ai pas essayé d'adapter ça pour lancer une requête PHP. Si quelqu'un a testé, ce serait intéressant d'en savoir plus.

Modifié 26 Juillet 2011 par Locace

[Portekoi]

Bonjour,

Je ne me souviens plus de la syntaxe mais avec jquery, tu as un argument qui spécifie le type d'appel comme un "script".

Je regarde sur Google.

Portekoi

[SStephane]

jQuery effectue déjà les requêtes Ajax en asynchrone à moins que tu ne le spécifies dans l'une des propriétés de l'objet (async: true|false de mémoire).

Sinon c'est dataType dont tu parles qui peut prendre comme valeur xml|html|json|jsonp|script, essaye, mais je pense pas que ça résolve ton souci.

Quoiqu'il en soit, on n'en sait pas davantage sur ce qui provoque l'apparition du sablier, d'où ma demande

Perso, je n'ai pas de doute sur le fait que ton code fonctionne...mais sans débogueur, j'ai un peu (beaucoup) la flemme de chercher une solution à l'aveugle pour ton souci.

[Locace]

Oui tout ça je sais mais encore une fois je voulais simplement savoir si quelqu'un connaissait une façon très légère et très discrète de lancer une requête assez lourde.

Pas trop besoin de mon code ici, on est plus dans la théorie.

Mais peu importe. Ce sujet est plus une bouteille à la mer qu'autre chose.

Si un jour vous avez une idée je suis preneur, sinon merci quand même.

Modifié 26 Juillet 2011 par Locace

[SStephane]

tu peux faire ça dès que le dom est initialisé, jusqu'à ce que ta requête soit terminée, sans savoir de trop si ça fonctionne :

$(document).ready(function(){
  document.getElementsByTagName('body')[0].style.cursor = 'default';
});

et remettre en 'auto' dans le callback de ton appel ajax; avec un peu de chance... (peut être moyen d'y accéder via jQuery au cursor, je ne sais pas)

[Bigb06]

Voila un article de Steve Souders, un ingénieur de l'équipe Google Performance, et qui détaille toutes les possibilités pour charger du code (ou autre) de façon asynchrone avec un tableau récapitulatif sur les différents indicateurs de chargement:
/>http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

[Locace]

Great I will read this soon.