window.onload with Chrome

window.onload with Chrome

本文关键字：Chrome with onload window      更新时间：2023-09-26

试图在页面加载后让 h1 淡入。在本地测试时，它适用于所有浏览器。但是当托管时，使用 Chrome，它并不总是淡入。有时它从一开始就完全可见。我已经尝试了 2 种方法，它们似乎都可以在 Safari 和 Firefox 中使用，但 Chrome 无论它是否有效都是"不确定的"。

Chrome 只是从缓存加载，没有执行，还是有另一种编写此 JavaScript 的方法？

我试过： 

$('.headerTopHeading, .headerSubHeading').animate({
    'opacity': '1'}, 1200);

包装在 document.ready 中，并从一开始就通过 CSS 将 Opacity 设置为零。

我试过：

window.onload = function () {
    $('.headerTopHeading, .headerSubHeading').fadeIn('1200');
};

通过 CSS 将显示设置为无，并放置在文档.ready 换行之外。

有什么建议吗？或者为什么Chrome的行为不是一直保持一致？

您确定 JS 控制台中没有有时会停止要执行的脚本的错误吗？

我建议你尝试只使用 jQuery 来更改类并将动画留给 CSS。虽然代码

$('.headerTopHeading, .headerSubHeading').animate({
    'opacity': '1'}, 1200);

看起来不错，所以也许试着把它包裹在你的 

  window.onload = function () {
  }

陈述？

为什么不简单地使用 CSS 动画来控制标题淡入 只需添加默认属性 opacity： 0 并带有动画延迟，表示您希望页面加载后多长时间发生淡入

@keyframes fadein {
   0% {opacity:0;}
   100% {opacity: 1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity: 1;}
}
@keyframes fadein {
   0% {opacity:0;}
   100% {opacity: 1;}
}
.fade-title {
   opacity: 0;
   color: #5f5f5f;
   -webkit-animation:fadein ease-in 1;
   -moz-animation:fadein ease-in 1;
   animation:fadein ease-in 1;
   animation-delay: 2s;
   -webkit-animation-fill-mode:forwards; 
   -moz-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
   -webkit-animation-duration:1s;
   -moz-animation-duration:1s;
   animation-duration:1s;
}

例：http://codepen.io/shperber/pen/XKzOLX

相关文章：