[英]show loading.gif before starting script
我正在使用需要花費一些時間來加載的腳本,因此我想在用戶等待時顯示一個loading.gif圖像。 當我查找如何執行此操作時,我想到了以下內容:
<div>
<div class="loader" style="position:center;top:300px;background-color:white;padding:20px;margin-left:45%;">
<img src="visualisation-arbor/loading36.gif" alt="Loading Image"/>
</div>
<canvas class="explore_area" id="viewport">
</canvas>
</div>
<script type="text/javascript">
jQuery(function($){jOWL_loader.load()});
function loop(){
var loaded = jOWL_loader.get();
if (!loaded){
setTimeout(function(){loop()}, 5)
} else {
$('.loader').hide();
visualize(loaded)
}
}
loop();
</script>
使用此代碼,不會顯示gif圖像。 我執行錯誤的東西還是順序錯誤?
順便說一句:.gif文件存儲在本地,大小為4 kb
我通常只是做這樣的事情:
$('#divWhereContentIsLoaded').hide().html('<img src="loading.gif" />').fadeIn().load('thingToLoad.php', {}, function(){
//something to do after it is loaded?
});
希望這可以幫助 ;)
.loading {position:center;
top:300px;
background-color:white;
padding:20px;
margin-left:45%;
background-image:url('visualisation-arbor/loading36.gif')}
<div>
<div class="loading" >
</div>
<canvas class="explore_area" id="viewport">
</canvas>
</div>
//requires jquery > 1.5
$(document).ready(function(){
// wrap the Asynchronous load call in a deferred object
var wrapperFunction = function wrapLoader(deferred){
jOWL_loader.load();
//flags the load as done.
deferred.resolve();
//return the promise object, so we can chain events off this entirely asynchronous function
return deferred.promise();
};
//create a deferred object, asynchronous
//passes the newly created Deferred object as the first param to the function wrapLoader
var ourDeferred = $.Deferred(wrapperFunction);
// when the promise object's listener registers the 'deferred.resolve()' call, execute our done function.
$.when(ourDeferred ).done(function(){
$('div.loading').toggleClass("loading");
}).done( function(){
var loaded = jOWL_loader.get();
visualize(loaded);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.