Jump to content

How to add Animated gif during loading page time on mobile


Recommended Posts

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

Link to comment
Share on other sites

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


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

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...