我正在使用 jquery + wow + animate 来制作页面上出现的一些 div 动画。一切正常,除了我的页面加载不顺畅。应该平滑显示的 div 首先出现在页面加载时,然后隐藏,之后它们以动画形式出现。
请检查 www.pester.rs 你可以看到问题,我已经尝试了一切,但没有任何效果。
我正在使用 jquery + wow + animate 来制作页面上出现的一些 div 动画。一切正常,除了我的页面加载不顺畅。应该平滑显示的 div 首先出现在页面加载时,然后隐藏,之后它们以动画形式出现。
请检查 www.pester.rs 你可以看到问题,我已经尝试了一切,但没有任何效果。
这将是加载顺序问题 - 首先,浏览器下载文档并显示它。稍后当它加载整个 javascript 时,它会隐藏内容以提供漂亮的动画。所以我认为它也受到互联网连接速度的影响。
解决方案 1:使用 css 隐藏内容,使其立即加载为隐藏
缺点:如果 javascript 崩溃,内容将保持隐藏状态
解决方案 2:将此代码放在正文的末尾,但在加载任何其他脚本之前(在任何其他脚本标记之前)
var wows = document.getElementsByClassName('wow')
for (i = 0; i < wows.length; i++){
wows[i].style.visibility ='hidden';
}
它将在页面加载后甚至在 jquery 之前立即执行,并且应该足够快。
解决方案 3 :按照http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether的建议,使用立即插入的 css 文件到文档的开头 -javascript支持可用/
您必须使用 CSS 隐藏这些 div,以防止闪烁。
我用它来隐藏对象
<div class="object-non-visible wow fadeInUp">
有了这个 CSS
.object-non-visible {
opacity: 0;
filter: alpha(opacity=0);
}