Show a 'Loading' Icon while loading Scripts

Question

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!

Don't bother. Those scripts aren't anywhere near big enough for the loading time to bother anyone. If you attempt this then frankly most of your users will be slowed down by your loading screen. (I'm assuming you live in a country where broadband is prevalent). — Ian Newson
– Ian Newson, Commented Nov 28, 2014 at 19:02

Alexandre Dees · Accepted Answer · 2014-12-01 15:28:09Z

1

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 */
}

answered Dec 1, 2014 at 15:28

Alexandre Dees

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show a 'Loading' Icon while loading Scripts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related