页面加载时触发JavaScript动画遇延迟问题求助

问题出在你依赖JavaScript来隐藏logo，而JS执行存在延迟，导致浏览器先渲染出logo，再执行隐藏操作，之后才触发动画，所以会出现“页面主体先显示”的情况。

修复方案： #

1. 先用CSS默认隐藏logo
   直接在样式里设置logo的初始隐藏状态，这样浏览器加载页面时就不会显示它，从根源避免闪烁：

   .logo {
       display: none;
       opacity: 0;
       margin-top: -20px; /* 设为动画前的初始位置，和动画目标0px形成对比，可根据需求调整数值 */
   }
   

2. 简化JavaScript代码
   不需要再用$(document).ready()来隐藏logo了，直接在DOM加载完成后触发动画即可。如果不需要等图片等外部资源加载完，用$(document).ready()比$(window).load()更及时：

   $(document).ready(function(){
       $('.logo').fadeIn('fast').animate({
           marginTop: '0px',
           opacity: 1
       }, 200, 'swing');
   });
   

   如果你确实需要等所有页面资源（比如logo图片）加载完成再执行动画，保留$(window).load()也可以，但CSS的初始隐藏必须加上。

补充说明： #

• CSS的解析应用优先级比JS更早，页面加载时CSS会先生效，所以初始隐藏不会有延迟。
• 把fadeIn和animate链式调用，代码更简洁，也避免重复查询DOM元素。

内容的提问来源于stack exchange，提问作者Hans