加载动画js方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #wrapper { background: #fff; opacity: 1; position: fixed; z-index: 10; top: 0px; width: 100%; height: 1600px; } #loader { background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff; width: 200px; height: 200px; margin: 300px auto; } </style> <script> window.addEventListener("load", function() { var wrapper = document.getElementById("wrapper"); document.body.removeChild(wrapper); }); </script> </head> <body> <div id="wrapper"> <div id="loader"></div> </div> <span>动画加载完毕</span> </body> </html>
原生js的load方法，没有依赖。
加载动画jq方法
1.使用setTimeout方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper { position: relative; height: 100%; width: 100%; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #fff; } #loader { background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff; display: block; position: relative; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; z-index: 1001; } .loaded #loader { opacity: 0; } .loaded #loader-wrapper { visibility: hidden; } </style> </head> <body> <div class="wrapper"> <div id="loader-wrapper"> <div id="loader"></div> </div> <span>动画加载完毕</span> </div> <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { setTimeout(function() { $('.wrapper').addClass('loaded'); }, 3000); }); </script> </body> </html>
模拟动画效果（没什么卵用）
2.使用load方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat rgb(249, 249, 249); } </style> </head> <body> <div class="loader"></div> <span>动画加载完毕</span> <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(window).load(function() { $(".loader").fadeOut("slow"); }) </script> </body> </html>
监听网页加载效果（不精准）
tip：动画效果实现方法
1.gif图片
2.svg图片（推荐）
3.css3动画（推荐）
以上方法并不能真正的获取页面加载进度信息。
接近真正的获取页面加载进度的方法
使用pace.js插件，监听元素加载，监听ajax请求。此插件原理是搜索页面的元素、请求，利用（ajax）document.readyState来获取进度信息。（推荐）
PS:如果网页使用了预加载或者懒加载技术的话,进度条的信息也是不真实的。