[英]show loading.gif before starting script
I am using a script which takes some time to load, so I want to show a loading.gif image while the user is waiting. 我正在使用需要花费一些时间来加载的脚本,因此我想在用户等待时显示一个loading.gif图像。 When I looked up how to do this, I came up with something like this: 当我查找如何执行此操作时,我想到了以下内容:
<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>
With this code, there is no gif image showed. 使用此代码,不会显示gif图像。 Do I implemented something wrong, or in the wrong order? 我执行错误的东西还是顺序错误?
btw: the .gif file is stored local and is 4 kb in size 顺便说一句:.gif文件存储在本地,大小为4 kb
I usually just do something like this: 我通常只是做这样的事情:
$('#divWhereContentIsLoaded').hide().html('<img src="loading.gif" />').fadeIn().load('thingToLoad.php', {}, function(){
//something to do after it is loaded?
});
Hope this helps ;) 希望这可以帮助 ;)
.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.