CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PLL On Abc
PLL On Abc

Reputation: 27

Show a 'Loading' Icon while loading Scripts

I want to display a 'loading' Icon or gif, with a completely black background (with transparency) (100% width and height) while loading some scripts (backstretch and JQuery Scrollbar). When those codes are loaded, I want the 'Gif Loading icon' and the black background to dissapear, and then show the entire and normal webpage. What do I have to do? Here you have the codes I'm using for those scripts.

BACKSTRETCH

<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 Scrollbar

<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>

Thank you so much! And I'm sorry for my english!

Upvotes: 1

Views: 1071

Answers (1)

Alexandre Dees
Alexandre Dees

Reputation: 21

You can just add a background-image to your loading div using CSS and you will just have to hide that div when all your scripts are loaded.

Here is the 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>

And here is the 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 */
}

Upvotes: 1

Related Questions