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. 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. Do I implemented something wrong, or in the wrong order?
btw: the .gif file is stored local and is 4 kb in size
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);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.