加载脚本时显示“加载”图标答案

【问题标题】：Show a 'Loading' Icon while loading Scripts加载脚本时显示“加载”图标
【发布时间】：2014-12-01 23:28:09
【问题描述】：

我想在加载一些脚本（backstretch 和 JQuery 滚动条）时显示一个“正在加载”图标或 gif，背景完全是黑色（具有透明度）（100% 宽度和高度）。加载这些代码后，我希望“Gif 加载图标”和黑色背景消失，然后显示整个正常网页。我需要做什么？这里有我用于这些脚本的代码。

回弹

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>
        <script> 
        $.backstretch([ 
              "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel130~0.jpg"
            , "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel128~0.jpg"
            , "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel143~0.jpg"
          ], {duration: 5000, fade: 750});
</script>

jQuery 滚动条

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/jquery.mCustomScrollbar.concat.min_.js"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".onliners, .packages").mCustomScrollbar();
        });
    })(jQuery);
</script>

非常感谢！我很抱歉我的英语！

【问题讨论】：

别打扰了。这些脚本远远不够大，加载时间不足以打扰任何人。如果您尝试这样做，那么坦率地说，您的大多数用户都会被您的加载屏幕拖慢。（我假设你生活在宽带普及的国家）。

标签： javascript jquery html css

【解决方案1】：

您可以使用 CSS 向加载 div 中添加背景图像，并且在加载所有脚本时只需要隐藏该 div。

这里是js：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".myLoadingDiv").fadeOut(600);
        });
    })(jQuery);
</script>

这里是css：

.myLoadingDiv {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* opacity to your taste */
    background-image: url(img/yourGif.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    left: 0; top: 0;
    z-index: 9999; /* at the top of the world */
}

【讨论】：