Cet article décrit l'effet d'invite de chargement avant que la page chargée par JS ne soit chargée. Partagez-le pour votre référence, comme suit:
1. Code JS:
// 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; // ChargementHTML CONTENU MONTAGE Affiché avant que la page ne soit chargée var _lokinghtml = '<div id = "LoadingDiv" style = "Position: Absolute; Left: 0; width: 100%; height:' + _pageHeight + 'PX; TOP: 0; Background: # f3f8ff; Opacité: 0,8; Filtre: Alpha (Opacity = 80); Padding-Left: 50px; Effet de chargement est rendu document.write (_lokinghtml); // window.onLoad = function () {// var chargeingmask = document.getElementById ('LoadingDiv'); // LoadingMask.parentNode.Removechild (chargingmask); //}; // écouter le chargement d'état de chargement.onReadyStatechange = Lorsque l'état de chargement est complet de la fonction completeLoading () {if (document.readystate == "complete") {var chargeingMask = document.getElementById ('LoadingDiv'); chargement mask.parentnode.removechild (chargement masque); }}2. Effet:
illustrer:
Il suffit de mettre cette section du code JS dans <Aad> à la fin;
Le style de l'effet de chargement peut être modifié en fonction de votre propre style. Vous devez trouver vous-même l'image de chargement.gif (beaucoup d'entre eux sont disponibles en ligne).
Cliquez ici pour télécharger le code d'instance de démonstration complet.
For more information about jQuery, readers who are interested in this site can view the topics: "Summary of common classic special effects of jQuery", "Summary of commonly used plug-ins and usages of jQuery", "Summary of jQuery table (table) operation skills", "Summary of jQuery form operation skills", "Summary of jQuery operation json data skills", "Summary of jQuery extension skills", "Summary of jQuery drag and drop special Effets et techniques "," Résumé de l'utilisation de l'Ajax dans jQuery "," Résumé de l'animation jQuery et de l'utilisation des effets spéciaux "et" Résumé de l'utilisation du sélecteur jQuery "
J'espère que cet article sera utile à la programmation jQuery de tous.