在启动脚本之前显示loading.gif

show loading.gif before starting script

本文关键字：显示 loading gif 启动 脚本      更新时间：2023-09-26

我正在使用一个需要一些时间来加载的脚本，所以我想在用户等待时显示一个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图像。是我执行错了什么，还是顺序不对?

btw: .gif文件存储在本地，大小为4kb

我通常是这样做的:

$('#divWhereContentIsLoaded').hide().html('<img src="loading.gif" />').fadeIn().load('thingToLoad.php', {}, function(){
    //something to do after it is loaded?
});

css

.loading {position:center;
top:300px;
background-color:white;
padding:20px;
margin-left:45%;
background-image:url('visualisation-arbor/loading36.gif')}
<标题> html 
<div>
        <div class="loading" >
        </div>
        <canvas class="explore_area" id="viewport">
        </canvas>   
    </div>

javascript，加载函数是异步的

    //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);
});
        });
相关文章：