san*_*han 0 html javascript css jquery
我使用此代码来动画整个网站的不透明度.
HTML
<body>
<script>document.body.className += ' fade-out';</script>
...
</body>
JS
$(function(){
$('body').removeClass('fade-out');
});
CSS:
body{
transition:1s all;
}
body.fade-out {
opacity: 0;
transition: none;
}
以此笔为例:https: //codepen.io/timsim/pen/bWOoYr
这会激活网站的不透明度,但不会等待所有图像准备好显示.整个网站正在改变不透明度,然后图像跳入.不好看.这只会在第一次加载网站时发生.
我想在图像准备好显示时触发正文不透明动画.window.onload似乎不是正确的地方.你会怎么做？
包装你的jQuery代码:
$(window).on("load", function() {
});
并且不要使用 $(document).ready();
当未加载图像时,DOM也准备就绪.一旦完成图像下载,将触发加载.所以在你的情况下:
$(window).on("load", function() {
$('body').removeClass('fade-out');
});
这应该做你想要的