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

显示图片<img src="loading.gif">
在dom-ready删除元素上。

$(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 );
  }

所以，在你的HTML地方你的gif最初出现。并且，在您的onload函数中添加此代码：

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

编辑：这是一个比其他人提供的更复杂的解决方案，也许如果你的目标非常简单，你应该使用其他一些。不过，这个功能很棒，我在很多项目中都使用过它。最好的是你可以随时选择加载脚本

show加载gif直到加载脚本

3 个答案: