Heim > Artikel > Web-Frontend > jQuery erzeugt einen gefälschten Ladeanimationseffekt

jQuery erzeugt einen gefälschten Ladeanimationseffekt

高洛峰Original: 2016-12-03 10:14:301283Durchsuche

Bei der Verwendung von PDFObject.js wird aufgrund der Notwendigkeit, Daten im Hintergrund zu konvertieren, bei der Anzeige im Vordergrund lange Zeit eine leere Seite angezeigt, daher habe ich darüber nachgedacht, eine gefälschte Ladeanimation zu schreiben

Skriptfragment:

<script type="text/javascript">
var bar = 0; 
var line = "||" ; 
var amount ="||" ; 
function count(){ 
bar= bar+2 ; 
amount =amount + line; 
$("#chart").val(amount);
$("#percent").val(bar+"%"); 
if (bar<99){
//设置1.5秒循环一次
setTimeout("count()",150);
}else{
$("#beforeSee").hide();
$("#pdfSee").show();
};
};
window.onload = function (){
PDFObject.embed("请求?code=${vdata.code}", "#pdfSee");
count(); 
}; 
</script>

Körperfragment:

<body >
<div align=center id="beforeSee" width="100%" height="100%"> 
<p><span class="red" style="font-size:50px;">拼命加载中，请稍后</span></p> 
<p> 
<input type="text" id="chart" name="chart" size="46" style="font-family:Arial; font-weight:bolder; color:gray;background-color:white; padding:0px; border-style:none;"> 
<br> 
<input type="text" id="percent" name="percent" size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none;">
<script type="text/javascript">
</script>
</p> 
</div>
<div align=center id="pdfSee" style="display:none" width="100%" height="100%">
<p><span class="red" style="font-size:50px;">控件丢失，请重新加载</span></p>
</div>
</body>

Das Obige ist der vom Editor eingeführte gefälschte Ladeanimationseffekt, der für alle hilfreich ist

Stellungnahme：

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

Vorheriger Artikel：Erster Kontakt mit dem magischen Frontend-Framework vue.jsNächster Artikel：Erster Kontakt mit dem magischen Frontend-Framework vue.js

In Verbindung stehende Artikel

Mehr sehen