Effet de chargement de page avec jquery

Existe-t-il un moyen d'utiliser jquery (ou une autre méthode) pour afficher une commande de chargement pendant le chargement de la page?Effet de chargement de page avec jquery

J'ai une table qui est remplie avec PHP/MySQL et peut contenir plusieurs milliers de lignes. Ceci est ensuite trié en utilisant le plugin tablesorter pour jquery. Tout fonctionne bien, cependant la page peut parfois prendre 4-5 secondes pour charger complètement et il serait bon d'afficher un message 'loading ...' dans un div qui disparaît automatiquement quand la table entière est chargée.

J'ai entendu parler du plugin de loadmask pour jquery - serait-ce approprié à mes besoins et sinon aucune alternative?

Aucun appel AJAX n'est effectué pendant le chargement de cette table si cela est pertinent.

Merci à l'avance Andy

Source

2010-05-19 Andy

Je pense que la meilleure façon d'accomplir ce serait d'utiliser AJAX. Vous auriez besoin de deux méthodes (scripts). Le premier chargerait la page initiale avec l'image de chargement et un peu de javascript pour appeler la deuxième méthode. La seconde méthode retournera le HTML pour votre table et le javascript (dans l'élément body, pas dans la tête) pour appeler tablesorter. Le javascript appelle la deuxième méthode, récupère le code HTML et l'insère sur la page, en remplaçant le message de chargement.

Exemple:

<script type="text/javascript"> 
    $(function() { 
     $.get('/example.com/secondmethod.php', function(html) { 
       $('#loadingImage').replaceWith(html); 
     }); 
    }); 
<script> 

<div id="doc"> 
    <img id="loadingImage" src="/example.com/images/loading.gif" alt="Loading..." /> 
</div>

Source

2010-05-19 11:46:28 tvanfosson

J'espère que ce lien peut être une aide pour vous .. (car je crois que vous ne voulez pas utiliser ajax)

http://forums.codecharge.com/posts.php?post_id=85584

grâce

Source

2010-05-19 11:51:36 Shrewdroid

Je ne sais pas si c'est ce que vous recherchez, mais vous pouvez simplement afficher un "chargement" et quand le plugin de tablesort est prêt. Afficher la table et masquer la div de chargement Cette méthode a quelques inconvénients et avantages.

Pour: 1. Vraiment facile à implémenter. 2. La division de chargement s'affichera jusqu'à ce que la table de stockage soit terminée. Je ne sais pas sur le tablesort mais comme c'est le code client, il y a une grande possibilité que le hold-up soit là.

Inconvénients: 1. Si le temps de chargement long est dû au temps nécessaire au serveur pour répondre à la demande, cela ne vous aidera pas. Ensuite, vous êtes mieux avec une solution AJAX. Voir la réponse de tvanfosson.

..fredrik

Source

2010-05-19 11:52:51 fredrik

Je les opérations suivantes:

Comme le premier enfant dans votre corps, insérez l'élément div comme:

<body> 
    <div id="loading">Loading...</div> 
    ...

style de manière appropriée comme par exemple:

#loading { 
    position: fixed; 
    top: 1em; 
    left: 1em; 
    z-index: 1; /* or a larger number */ 
    ... 
}

Ensuite, utilisez le jQuery suivant:

$(document).ready(function() { 
    $("#loading")[0].style.visibility = "hidden"; 
});

Je ne peux pas tester ce moment, je l'espère ne pas trop nombreux bugs ...

Source

2010-05-19 11:57:05

Effet de chargement de page avec jquery

Répondre

Questions connexes