带有 Chrome 的 window.onload答案

【问题标题】：window.onload with Chrome带有 Chrome 的 window.onload
【发布时间】：2016-07-14 01:27:41
【问题描述】：

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

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

我试过了：

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

包装在一个 document.ready 中，并从一开始就通过 CSS 将不透明度设置为零。

我已经试过了：

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

通过 CSS 将显示设置为无并放置在 document.ready 包装之外。

有什么建议吗？或者 Chrome 的行为始终不一致的原因？

【问题讨论】：

标签： javascript google-chrome

【解决方案1】：

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

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

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

看起来不错，所以不妨尝试将其包装在您的

中

  window.onload = function () {
  }

声明？

【讨论】：

没有错误。我什至在“window.onload”中放了一个“console.log”，它按预期通过。我确实在 JQuery 文档中发现，如果对象在缓存中，显然它有时会无法触发。

【解决方案2】：

为什么不简单地使用 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

【讨论】：

我考虑过这种方法，它似乎是最好的防故障选项。我只是不喜欢在上面设置一个计时器。但是等等，使用 css keyframes 方法会仅在页面加载后触发，还是仅在 css 文件加载后触发？
我刚刚尝试了这种方法，虽然它确实按预期淡入，但我仍然面临与 Chrome 相同的问题，如果页面已被缓存，它不会淡入而只是出现。这绝对是 Chrome 处理缓存对象的一种方式。
如何将淡入淡出动画移动到不同的类，然后在页面加载后添加它：$('.fade-title').addClass('fade-in')