要准备一个loading动画,为了专业我们用svg而不是GIF(也可以是CSS3),那么在哪里搞一个漂亮的loading动画呢?来看看这个库,打开它的站点发现很多比较酷炫的loading效果。我们怎么放到自己的站点里呢?看它的 README 里说
<img src="loading-balls.svg" alt="Loading icon" />
也就是说选一个你喜欢的 loading 的 svg 文件保存在静态资源目录,然后引入,和我们引入图片的方式一样,你把它放在网站合适的位置,打开站点的时候就会出现 loading效果。
下一个问题是,如何等网页加载完再出来,专业点叫 DOM加载完毕事件。
在不使用Jquery的情况下可以使用JS原生代码实现,跨浏览器且纯JavaScript检测document是否加载完成的方法是使用readyState.
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething()
{
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入
//你要做的操作。
}
}