在启动脚本之前显示loading.gif [英] show loading.gif before starting script

问题描述

我使用的脚本需要一些时间才能加载，因此我想在用户等待时显示一个loading.gif图像。当我查找如何做到这一点时，我想出了这样的事情：

 < div> 
< div class =loaderstyle =position：center; top：300px; background-color：white; padding：20px; margin-left：45％;> 
< img src =visualization-arbor / loading36.gifalt =加载图片/> 
< / div> 
< canvas class =explore_areaid =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（）; 
可视化（加载）
} 
} 
 loop（）; 
< / script> 
  

使用此代码，没有显示gif图像。我是否执行了错误的命令或错误的命令？

btw：.gif文件存储在本地，大小为4 KB

  $ 
 
 （'#divWhereContentIsLoaded'）。hide（）。html（'< img src =loading.gif/>'）.fadeIn().load('thingToLoad.php'，{}，function（）{
 //加载后需要做些什么？
}）; 
  

希望这有助于;）

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.gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！