一般我们只依靠onload或者document.ready事件来判断页面是否加载完毕,因为loading状态没有意义。因为页面完全加载之前,我们无法了解哪些东西已经加载了,如果这个时候调用js或者html元素可能产生错误。
页面加载之前是没有任何事件的。所谓加载之前的动画是形如以下的代码
<html>
<body
onload="第一个div隐藏,第二个div显示">
<div>
<img
src='loading.gif'
style="width:
100%"
/>
</div>
<div
style="diaplay:
none">
<!--页面内容在这里加载-->
</div>
</body>
</html>
当网页的向下滚动的时候,有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己写判断位置和动画结合的话也是可以但是动画效果不是特理想需要多次调试,其次也是很麻烦的所以该插件帮我们 写好了,我们只需要在浏览器滚动到该盒子位置为他加上在animate.css我们需要的效果类名既可。WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。
兼容性能:;wow.js 使用了 querySelectorAll 方法,IE 低版本会报错。iE10+
缺点 动画效果执行一次 滑到顶部再往下滑动就无效了 需要页面刷新了
有个很简单的方法
首先载入jquery
<script src="之后把body加上style
<body style="display: none">
然后添加script事件
<script>
$(document).ready(function(){
$('body').show(10000) // 1000等于1秒
})
</script>