显示加载gif，直到脚本加载完毕

Question

我想显示一个加载器图标gif，直到脚本完全加载为止，这可能吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img src="loading.gif">

我认为有必要使用jQuery。 但我不知道该怎么办。 有人可以帮我吗？

Answer 1

1. 显示图像<img src="loading.gif">

2. 在支持dom的元素上删除。

   $(document).ready(function () { $('img').remove(); })

Answer 2

即使没有jQuery也可以完成：

<img id="loading" src="loading.gif">
<script onload="javascript:document.getElementById('loading').style.display='none'" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">    </script>

Answer 3

是的你可以。 您可以使用此函数来加载脚本并触发回调。 在回调中，您隐藏了gif。

function loadScript( url, callback) {
    var script = document.createElement( "script" )
    script.type = "text/javascript";
    if(script.readyState) {  //IE
      script.onreadystatechange = function() {
        if ( script.readyState === "loaded" || script.readyState === "complete" ) {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {  //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName( "head" )[0].appendChild( script );
  }

因此，将gif最初显示在HTML中。 并且，在您的onload函数中添加以下代码：

<script>
   window.onload = function(){
     loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', function(){
        $('.gif-selector').hide();
     })
   }
</script>

编辑：这是一个比其他提供的解决方案更复杂的解决方案，也许如果您的目标很简单，则应该使用其他解决方案。 尽管如此，此功能仍然有效，我在许多项目中都使用了它。 最好的是，您可以选择随时加载​​脚本