Comment puis-je centrer le chargement div avant load() avec jQuery?

Question

Je possède ce code:

$("#result").html('<div class="loading">Loading results...</div>'); 
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query')); 

Il montre la div de chargement jusqu'à ce que la charge se fait. Qu'est-ce que je veux faire ici, je veux le chargement div exactement au centre de la page/document?

• C'est extra mais ça pourrait être sympa - est-ce que je peux aussi fondre le document jusqu'à ce que la charge soit faite pour que le div de chargement se démarque?

Toutes les suggestions de jquery/css sont les bienvenues.

Merci :)

Answer 1

vous pourriez mettre un div centre autour de votre chargement ...

$("#result").html('<div align="center" style="width:100%"><div class="loading">Loading results...</div></div>'); 

Answer 2

Si vous comprenez correctement à la question: Vous devez savoir comment centrer le div de chargement à la fois horizontalement et verticalement? Si oui, je voudrais jeter un oeil à la réponse à cette question: Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7.

Answer 3

.loading { 
    width:200px; 
    height:50px; 
    background:#CCC; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-25px 0 0 -100px; /* Half of height and width */ 
    } 

Si vous ne connaissez pas la largeur/hauteur ou il est dynamique, vous pouvez utiliser .width() et .height() pour obtenir des valeurs, qui devraient être divisées par 2.

Answer 4

Have vous avez regardé jQueryUI? Vous pouvez utiliser une boîte de dialogue modale pour cela. jQueryUi centre automatiquement la boîte de dialogue modale et vous pouvez faire disparaître la boîte de dialogue une fois le chargement terminé. Il y a un moyen de supprimer la barre de titre de la boîte de dialogue: http://www.comanswer.com/question/jquery-ui-dialog-how-to-initialize-without-a-title-bar

Je ne sais pas si c'est ce que vous cherchez, mais il pourrait éviter des maux de tête pour plus tard sur la route (et il est assez et vous pouvez avoir des thèmes personnalisés).

Answer 5

Cela pourrait être un peu trop tuer mais le plugin jQuery UI dialog pourrait atteindre ces effets (vous ne l'utiliseriez tout simplement pas pour un dialogue ...). Découvrez l'option modale et l'exemple. Si vous utilisez déjà jQuery ui, cela pourrait en valoir la peine ...