Heim > Web-Frontend > js-Tutorial > Hauptteil

EasyUI-Begrüßungsbildschirm EasyUI-Seitenladeaufforderung (Hauptcode-Renderings)_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:14:37
Original
1384 Leute haben es durchsucht

Bei der Verwendung von EasyUI tritt häufig ein Problem auf, das auftritt, bevor die Seite gerendert wird.

Am Anfang war es verwirrend, aber nach Abschluss des Ladevorgangs wird alles in Ordnung sein.

$.parser.onComplete, dies ist ein Ereignis, das ausgeführt wird, nachdem alle Komponenten analysiert wurden. Tatsächlich ist diese Veranstaltung sehr nützlich. Es gibt immer ein Problem, wenn easyui im ​​Layout verwendet wird. Wenn Sie die Hauptoberfläche aufrufen, wird die Seite nicht sofort angezeigt, sondern es findet ein chaotischer Prozess statt, der dann blinkt und wiederhergestellt wird.

Das liegt eigentlich daran, dass easyui nach dem Laden des Doms die gesamte Seite analysiert. Wenn Sie viele Layouts und Komponenten verwenden, ist ein Prozess erforderlich, um die Komponenten vollständig zu analysieren Schnittstellenverwirrung.

Um dieses Problem zu lösen, müssen Sie nur das onComplete-Ereignis sinnvoll nutzen und es mit einer Lademaske kombinieren.

Fügen Sie auf einer Seite alles ein, was diesen Animationseffekt benötigt.

<#include "common/loadingDiv.html"/>(Freemarker的include语法,模版用的.html后缀)
Nach dem Login kopieren

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> 
Nach dem Login kopieren

Der obige Inhalt ist der vom Herausgeber eingeführte EasyUI-Begrüßungsbildschirm. Ich hoffe, er wird Ihnen hilfreich sein!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!