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

Écran de démarrage EasyUI Conseils de chargement de page EasyUI (principe + code + rendus)_compétences javascript

WBOY
Libérer: 2016-05-16 15:14:37
original
1385 Les gens l'ont consulté

Lors de l'utilisation d'EasyUI, il existe un problème souvent rencontré, qui se produit avant le rendu de la page.

C'était déroutant au début, mais tout ira bien une fois le chargement terminé.

$.parser.onComplete, il s'agit d'un événement exécuté une fois que tous les composants ont été analysés. En fait, cet événement est très utile. Il y a toujours un problème lorsque easyui est utilisé dans la mise en page. Lorsque vous entrez dans l'interface principale, la page n'apparaît pas immédiatement, mais il y a un processus chaotique, puis elle clignote et est restaurée.

En fait, c'est parce qu'easyui analysera la page entière après le chargement du dom. Lorsque vous utilisez beaucoup de mises en page et de composants, il faudra un processus pour analyser complètement les composants, et dans ce processus, il y aura un bref. confusion des interfaces.

Pour résoudre ce problème, il vous suffit de faire bon usage de l'événement onComplete et de le combiner avec un masque de chargement.

Mettez ce qui a besoin de cet effet d'animation dans une page.

<#include "common/loadingDiv.html"/>(Freemarker的include语法,模版用的.html后缀)
Copier après la connexion

loadingDiv.html

<div id='loadingDiv' style="position: absolute; z-index: 1000; top: 0px; left: 0px; 
width: 100%; height: 100%; background: white; text-align: center;"> 
<h1 style="top: 48%; position: relative;"> 
<font color="#15428B">努力加载中···</font> 
</h1> 
t;/div> 
<script type="text/javascript"> 
function closeLoading() { 
$("#loadingDiv").fadeOut("normal", function () { 
$(this).remove(); 
}); 
} 
var no; 
$.parser.onComplete = function () { 
if (no) clearTimeout(no); 
no = setTimeout(closeLoading, 1000); 
} 
</script> 
Copier après la connexion

Le contenu ci-dessus est les conseils de chargement de la page EasyUI de l'écran de démarrage EasyUI présentés par l'éditeur. J'espère qu'il vous sera utile !

É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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!