Maison > interface Web > js tutoriel > le corps du texte

Jquery ajoute un masque de transition de chargement

不言
Libérer: 2018-07-07 17:37:16
original
2095 Les gens l'ont consulté

Cet article présente principalement Jquery pour ajouter un masque de transition de chargement, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Utilisez webpack pour empaqueter un projet h5 et du CSS. Il est emballé dans bundle.js. Si le chargement est lent, la page apparaîtra laide sans style pendant quelques secondes, je souhaite donc définir un masque blanc et disparaître après le chargement du js.
Placez un bloc de chargement dans le corps avec ses propres styles en ligne (vous n'avez donc pas besoin de vous fier aux informations de style fournies dans bundle.js pour être chargé la première fois).

  <!-- index.html -->
  <p></p>
Copier après la connexion

Attendez ensuite que le js soit chargé, puis exécutez la méthode de disparition. La fonction de rappel d'animate() est utilisée ici pour rendre la transition plus naturelle si vous souhaitez consacrer des efforts à l'ajustement. ça, il y a beaucoup de place.

 //index.js(打包后出现在bundle.js里)
  $('#loading').animate({
    opacity: '0'
  }, function () {
    $('#loading').hide()
  })
Copier après la connexion

L'effet est le suivant
Jquery ajoute un masque de transition de chargement

C'était comme ça avant l'optimisation, la différence est encore très grande
Jquery ajoute un masque de transition de chargement

Ce qui précède est le contenu complet de l'article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

vue pour obtenir un effet de défilement numérique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal