Skip to content Skip to sidebar Skip to footer
Home / Javascript / Php

How To Show Loading Animation If Browser Supports Js

Post a Comment
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 di

Solution 1:

You can just use:

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

Solution 2:

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?

Solution 3:

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.

Post a Comment for "How To Show Loading Animation If Browser Supports Js"