Avez-vous des idées d'images de chargement Ajax à utiliser avec jQuery?

Question

J'ai une page en cours de chargement avec jQuery. La charge initiale comprend 100 enregistrements avec 6 icônes par enregistrement. Inutile de dire que cela prend quelques secondes à charger et je veux donner à l'utilisateur une invite/animation de "chargement".

Des idées?

Answer 1

http://www.ajaxload.info/ est une excellente ressource pour générer des GIF animés pour ce genre de chose.

Une fois que vous avez votre animation, rendez-la comme partie de la page; déclenchez le mécanisme de chargement jQuery sur l'événement onload() de l'animation (vous êtes donc certain que l'animation a été chargée en premier) et utilisez un rappel à la fin de votre séquence de chargement pour désactiver/masquer le GIF animé.

Answer 2

Vous pouvez afficher une div avec une image GIF animée comme invite de chargement. C'est comme ça que je l'ai fait dans le passé.

Answer 3

Chaque fois que j'ai eu besoin de quelque chose comme ça, je remplace l'élément qui sera chargé avec un gif simple, centré et animé de quelque sorte qui dit "Chargement, veuillez patienter" ou un message similaire. Si cela ne prend que quelques secondes, un indicateur de progression est probablement exagéré, mais une animation simple donne à la plupart des gens l'assurance que, oui, votre site fonctionne toujours.

Answer 4

Matt Berseth a a nice jQuery-based way of doing this.

Answer 5

Vous pouvez configurer un événement ajax global pour afficher/masquer l'icône de chargement. Jetez un oeil à: http://docs.jquery.com/Ajax_Events

Answer 6

Une autre ressource pour les images de chargement: http://www.loadinfo.net/

Answer 7

Vous pouvez faire une animation dans CCS3, par exemple, si vous voulez une impulsion:

Le balisage HTML:

<div class="pulse"></div> 

Le css:

.pulse { 
    width: 32px; 
    height: 32px; 
    margin: 25% auto; 
    background-color: #303030; 
    -webkit-border-radius: 16px; 
    -moz-border-radius: 16px; 
    -ms-border-radius: 16px; 
    -o-border-radius: 16px; 
    border-radius: 16px; 
    -webkit-animation: scaleout 1.0s infinite ease-in-out; 
    animation: scaleout 1.0s infinite ease-in-out; 
} 
@-webkit-keyframes scaleout{ 
    0%{ 
     -webkit-transform:scale(0) 
    } 
    100%{ 
     -webkit-transform:scale(1); 
     opacity:0 
    } 
} 
@-moz-keyframes scaleout{ 
    0%{ 
     -moz-transform:scale(0) 
    } 
    100%{ 
     -moz-transform:scale(1); 
     opacity:0 
    } 
} 
@-ms-keyframes scaleout{ 
    0%{ 
     -ms-transform:scale(0) 
    } 
    100%{ 
     -ms-transform:scale(1); 
     opacity:0 
    } 
} 
@-o-keyframes scaleout{ 
    0%{ 
     -o-transform:scale(0) 
    } 
    100%{ 
     -o-transform:scale(1); 
     opacity:0 
    } 
} 
@keyframes scaleout{ 
    0%{ 
     transform:scale(0); 
     -webkit-transform:scale(0) 
    } 
    100%{ 
     transform:scale(1); 
     -webkit-transform:scale(1); 
     opacity:0 
    } 
} 

Ou vous pouvez créer un div avec image intérieure ou image de fond, vous avez here quelques idées pour l'animation, il a un jeu téléchargeable gratuitement, profitez-en.