Attendez le chargement du style CSS de la page, le contenu HTML est chargé, puis affichez-le après la génération du style, en évitant les effets visuels négatifs causés par le rendu progressivement du style après le chargement du contenu au début et en améliorant l'expérience utilisateur.
Ajout du fichier de base-chargement.js, le code est le suivant
// Obtenez la hauteur et la largeur visibles de la page du navigateur var _pageHeight = document.DocumentElement.ClientHeight, _PageWidth = Document.DocumentElement.ClientWidth; // Calculer la distance entre la boîte de charge (_PageHeight - 61) / 2: 0, _loadingleft = _pageWidth> 215? (_PageWidth - 215) / 2: 0; // Chargement Address GIF Var LoadImagerul = "/ Content / Loadjs / Image / Loading.gif"; // LoadingHtml Custom Content affiché avant que la page soit chargée var _lokinghtml = '<divi id = "LoadingDiv" Style = "Position: AbsUlée; 'PX; TOP: 0; Background: # F3F8FF; Opacité: 1; Padding-Left: 50px; Document.Write (_lokingHtml); // Parle à l'état de chargement pour modifier le document.onreadyStateChange = completeLoading; // supprimer l'effet de chargement lorsque l'état de chargement est complet de la fonction completeLoading () {if (document.readystate == "complete") {var chargeingmask = document.getElementyId ('loadingDiv'); chargement mask.parentnode.removechild (chargement masque);}}Lorsque vous l'utilisez, il vous suffit de l'introduire dans la tête
@ * // Chargez l'effet d'animation JS * @
<script src = "~ / contenu / loadjs / base-chargeding.js"> </ script>
L'effet est le suivant: Après l'introduction, lors du chargement du contenu et des styles HEML, une animation de chargement apparaîtra, qui sera affichée après le chargement pour éviter que l'écran de bégaiement soit progressivement rendu.
Le rendu est terminé et l'écran de rendu s'affiche à la fois.
Ce qui précède est ce que l'éditeur vous a présenté. Une fois l'acideui chargé, le rendu de style de contenu du contenu HTML est affiché. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!