Jquery ajoute un masque de transition de chargement

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>

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()
  })

L'effet est le suivant

C'était comme ça avant l'optimisation, la différence est encore très grande

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!