Jquery display loading images until webpage loading is complete
This example describes how jquery displays loading images until the webpage is loaded. Share it with you for your reference. The specific implementation method is as follows:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<! DOCTYPE html> <Html class = "no-js"> <Head> <Meta charset = 'utf-8'> <Title> Simple Loader </title> <Style> /* This only works with JavaScript, If it's not present, don't show loader */ . No-js # loader {display: none ;} . Js # loader {display: block; position: absolute; left: 100px; top: 0 ;} </Style> <Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> </script> <Script src = "https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"> </script> <Script> // Wait for window load $ (Window). load (function (){ // Animate loader off screen $ ("# Loader"). animate ({ Top:-200 },1500 ); }); </Script> </Head> <Body> </Body> </Html> |
I hope this article will help you with jquery programming.