How to show loading animation if browser supports JS

Question

I want to show loading animation if browser supports JS. if JavaScript is disabled then the image will show but never be hidden, in this case. For this purpose I wrote this code directly after the <body> tag:

<?php
$results = get_browser();
if ($results["javascript"] == 1) {
echo '<div id="loading"><img src="core/design/img/load/load.gif"/></div>';
}
?>

And my js looks like that

$(window).load(function(){
$('#loading').fadeOut(600); 
});

Got error message browscap ini directive not set in. How can I realize my idea?

You get that error message because you have not [setup `browscap.ini` in `php.ini`](http://us2.php.net/manual/en/misc.configuration.php#ini.browscap). That said `get_browser()` isn't reliable for this kind of thing. It doesn't test a browsers capabilities, it just looks them up in a list based on the User Agent string. It tells you if a browser _should_ be able to do it, not if it _can_. Almost every browser in use to day _should_ be able to use JavaScript; but many of them have it turned off and `get_browser()` will yield a false positive. — Useless Code, Sep 28 '11 at 07:07
[See this answer](http://stackoverflow.com/questions/2036956/browscap-ini-directive-not-set/2036968#2036968) for a little more detail. — Useless Code, Sep 28 '11 at 07:08

Paul · Accepted Answer · 2011-09-28T04:44:51.817

1

You can just use:

<body>
//set the div to hidden by default
<div id="loading" style="display:none"><img src="core/design/img/load/load.gif"/></div>
//place this code directly below the loading div, it will run before page/dom is loaded
<script type="text/javascript">
    document.getElementById('loading').style.display = 'block';
</script>
<script type="text/javascript">
    $(function() {
        //this will run after the page has loaded
        $('#loading').fadeOut(600);
    });
</script>
...

If you want to do exactly what aquastyle.az does (though the above solution is faster), You can do this:

<body>
<script type="text/javascript">
    //if JavaScript is enabled, append the loading div to be body
    $('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
</script>
<script type="text/javascript">
    $(function() {
        //this will run after the page has loaded
        $('#loading').fadeOut(600);
    });
</script>
...

edited Sep 28 '11 at 04:44

answered Sep 28 '11 at 03:48

Paul

12,392
4
48
58

but it's not the solution. The loading div will only appear after full page load. But i want to hide whole loading process with this loading div – Tural Ali Sep 28 '11 at 03:53
misunderstood what you were trying to do, I have updated my code so the show will execute before the page has loaded. – Paul Sep 28 '11 at 04:02
The code I showed will work just like the example in aquastyle.az. Make sure the div and the scripts are just below the `` tag – Paul Sep 28 '11 at 04:31
aquastyle.az is my website. And pay attention that, there is big delay besfore loading bar appears – Tural Ali Sep 28 '11 at 10:46

score 1 · Answer 2 · answered Sep 28 '11 at 04:18

1

In your HTML, you could do something like this:

<html class="no-js">
...

Then, once the page loads, replace the no-js class with a js class via JavaScript.

$(window).load(function(){
    $('html').removeClass('no-js').addClass('js');
});

Finally, in your CSS, show the loading image if the browser supports js and hide it if it doesn't.

.js #loading {
    display: block;
}
.no-js #loading {
    display: none;
}

Does that make sense?

answered Sep 28 '11 at 04:18

Jason Barry

738
5
17

If you use [Modernizr](http://www.modernizr.com/) it automatically adds a `js` class to the `` tag so you can do things like this. – Useless Code Sep 28 '11 at 06:48

score 0 · Answer 3 · answered Sep 28 '11 at 04:06

The get_browser function must be download the appropriate INI file and include it in your PHP.ini file.

Instead of trying to figure out if the user has javascript enabled, why don't you build out the site from the perspective of progressive enhancement, so it works for all users regardless of their browser settings.

Alternatively, you could ask javascript to set a cookie, and then check that the cookie exists in PHP, it's by no means 100% foolproof method but could work for your situation.

How to show loading animation if browser supports JS

3 Answers3

Linked