Créer un écran de chargement en HTML5
Je vais avoir quelques problèmes pour trouver un tutoriel décent pour la génération d'un chargement de style écran en ce qui concerne le HTML5. Pour être tout à fait honnête, je ne sais pas exactement par où commencer...
Mon projet est essentiellement un simple HTML5 jeu, où je vais être en cours de chargement dans diverses feuilles sprite et tilesets. Ils vont être raisonnablement petit, mais j'aimerais vous montrer un peu le chargement spinner au lieu d'un écran vide alors que toutes les ressources sont chargées.
Apprécié si quelqu'un pouvait me diriger dans la bonne direction, que ce soit décent, des liens ou des exemples de code pour m'aller...mon Google-fu fait défaut aujourd'hui!
Pour plus de précisions, j'ai besoin de comprendre comment charger les ressources elles-mêmes, par opposition à la recherche d'un spinner. Par exemple, comment calculer que X% a chargé.
Edit 2
Idiot moi, je peux juste vérifier <variable>.image.complete
. A voté pour les fermer.
source d'informationauteur espais
Vous devez vous connecter pour publier un commentaire.
Ce site est excellent pour l'animation de chargement gifs: http://ajaxload.info/. Une superposition peut être utilisé pour afficher l'image et aussi de prévenir toute interaction avec la page en cours de chargement. Vous pouvez utiliser un div, de la positionner au-dessus de tout le reste (
z-index
) et de définir la largeur et la hauteur de100%
.Une vieille question, mais il est utile de savoir que l'Image de l'objet a également un événement onload. Il est souvent bien mieux l'utiliser que pour vérifier complète, par exemple, dans une boucle.
Exemple d'utilisation (et non pas vérifié si le travail):
C'est une excellente ressource pour démontrer HTML5 CSS animation.
http://slides.html5rocks.com/#css-animation
Il montre comment créer un état de chargement de la barre:
http://slides.html5rocks.com/#semantic-tags-2
Il y a beaucoup d'autres exemples sur les diapositives ainsi que peut-être ce que vous cherchez.
Vous pouvez utiliser
<progress>
élément HTML5. Voir cette page de code source et de démonstration en direct.http://purpledesign.in/blog/super-cool-loading-bar-html5/
ici, ce sont les progrès de l'élément...
cela aura le chargement de la valeur de départ de 20. Bien sûr que l'élément habitude suffire. Vous devez déplacer le script charge. Pour cela nous avons besoin de JQuery. Voici un simple script JQuery qui démarre le progrès de 0 à 100, et fait quelque chose dans l'intervalle de temps défini.
Ajouter ceci à votre fichier HTML.
Espère que cela vous donnera un point de départ.
Parce que cette question est taggés avec html5 - je pense que nous pouvons faire mieux qu'un spinner gif. Plus moderne de rechange:
http://fgnass.github.io/spin.js/