时间戳

首页 > 解决方案 > 带有 window.onload 的淡入淡出/速度在 50% 的所有页面加载中不起作用

javascript - 带有 window.onload 的淡入淡出/速度在 50% 的所有页面加载中不起作用

问题描述

和许多人一样的问题 - 我使用了带有 jquery fadeOut 的预加载器，它有点口吃（Firefox），在我的移动设备或 Chromium 上，它根本没有在大约 50% 的页面加载中“触发”。

现在我用 .velocity 交换了它，结果相同。

在 Firefox 中运行良好，只是在某些子页面上有点卡顿 - 但在 Chrome 或我的手机上看到这一点很可怕 - 在所有页面加载的 50% 中根本没有淡入淡出效果，它只是从不可见“跳转”到立即可见。

我已经尝试过添加

{
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

到许多具有相同结果的类。我用这种方式

    // Wait until all images loaded
        window.onload=function() {
    // Fade
        $(".jtpl-logo").velocity("fadeOut", {delay:50, duration: 400});  
        $(".jtpl-navigation-label").delay(900).velocity({ opacity: 1 }, 600);
};

就在此之前，我运行了一个 

        $(document).ready(function() {
        $(".jtpl-background-area").css('-webkit-animation', 'fadein 5s');
});

我知道同时运行两者不太好，但是如果我禁用 $(document).ready 同时运行的 background-fadeIn 并没有什么区别 - 白色“预加载器页面”的 fadeOut window.onload 处的 fadeOut 会产生完全相同的问题。

所以问题是别的——但是什么？

我必须在 window.onload 上使用它，如果我在 $(document).ready 上使用它，一些页面元素还没有准备好。

需要想法如何解决这个问题，请给我一些意见。为什么 Chrome 在 50% 的情况下都没有触发或者跳得这么厉害？jquery 或速度是否有任何好的选择来确保淡入淡出在所有页面加载的 100% 中起作用？

欢迎任何改进这一点的想法。非常感谢

标签： javascriptjqueryhtml

解决方案

推荐阅读