Question

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

Answer 1

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 😉