How to add Animated gif during loading page time on mobile

[Dashe]

I've just update my site to prestashop 1.6 with a responsible theme I've release an App that use the browser of smartphone/tablet to navigate on mobile and tablet version.

But the experience on mobile is not good because the user doesn't understand the loading time of my site: the user clicks on a link/product and not appear until the new page is loaded (mobile connection is slow in my country).

So I'd like to add a animated gif like an Icon in the center of the screen for every loading time (only for mobile theme).

I didn't find any module like that.

Someone have an idea?

Best regards

[PascalVG]

Maybe this helps:

 

http://stackoverflow.com/questions/16059604/jquerymobile-display-loading-animation-spinner-while-loading-pagehttp://stackoverflow.com/questions/16059604/jquerymobile-display-loading-animation-spinner-while-loading-page

 

My 2 cents,

pascal

[Dashe]

Tks Pascal for your help.
I tried the guide but I can't modified the code in the right way.

 

I found another guide, but the results is not so good

 

I add this code in head of header.tpl of my theme:

 

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");;
        });
        </script>

 

and in the end of the same file

 

<div class="se-pre-con"></div>

 

and this code in global.css file:

 

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(img/Boccale_Caricamento.gif) center no-repeat;
}

 

Now my gif is loaded but:

1) it's work for all device (minor problem, I can fix that when I'll understend the mobile discriminator)

2) it's work only during the loading of next page. I click on a link and until the new page is start to load no gif is showed.

It's not so good, I'd like to have the gif in all the loading time or, better, in all the waiting time (e.g time for adding product in the cart).

 

Tks in advance

[PascalVG]

Maybe this with help in case no 2:

 

For mobile, to make it device independent, maybe just use the width of the window:

 

var $window = $(window);

if ($window.width() > 320) {

   // don't show something

}

 

or the other way:

 

var $window = $(window);

if ($window.width() <= 320) {

   //Show something

}

 

or so. Hope this helps.

pascal.