页面的 Jquery 淡入和淡出在加载之间生成白色页面闪烁答案

【问题标题】：Jquery fadeIn and fadeOut of page is generating a white page flash between loads页面的 Jquery 淡入和淡出在加载之间生成白色页面闪烁
【发布时间】：2013-07-12 17:42:43
【问题描述】：

我在使用 jQuery 的网页中使用淡入淡出和淡入淡出时遇到问题。当脚本运行时，我的页面淡出，然后我得到一个白色的闪光，然后我的新页面淡入。这是典型的 jQuery 效果吗？这对我来说是个问题，因为该站点非常暗，背景为黑色，因此非常刺耳。

下面是我用来运行这些效果的脚本。生成这个的页面重定向可能是一个问题吗？有没有更有效的方法？

$(document).ready(function() {

    $("body").css("display", "none");

    $("body").fadeIn(2000);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });

    function redirectPage() {
        window.location = linkLocation;
    }

});

提前谢谢各位。感谢您的帮助。

帕特里克

【问题讨论】：

在样式表中不显示正文，而不是在 DomReady 上显示。

标签： jquery performance fadein fadeout

【解决方案1】：

当淡出动画完成时，它会在 body 上设置 display:none。这可能是您的白色闪光的来源。尝试将整个页面包裹在正文中的一个 div 中，然后将该 div 淡出。

或者尝试应用这个 CSS：

html,body {
  background-color:#000;
}

【讨论】：

【解决方案2】：

出现白色闪光是因为在 .ready() 函数被触发之前的那几分钟，你的 body 元素正在显示。如果连接速度较慢，情况会变得更糟。

您可能会尝试做的是在您的身体顶部覆盖一个 div，然后将该 div 淡出。但您的结果仍会因浏览器/网络速度而异。

在 CSS 中：

.overlay {
  display: block;
  background-color: #000;
  position: fixed;
  width: 100%; 
  height: 100%;
  z-index: 999;
}

在 JS 中：

$(document).ready(function () {
  $('.overlay').fadeOut();

  $("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $('.overlay').fadeIn(1000, redirectPage);    
  });
});

这仍然很糟糕。当你加载一个新页面时，你会给浏览器提供很多关于它如何决定转换到下一页的体验。

您可以考虑改为通过 AJAX 进行转换：

function transition() {
  var loadContent = $.get('/url-to-content');

  $('.overlay').fadeIn(1000, function () {
    loadContent.then(function (data) { 
      $('.content-div').html(data);
      $('.overlay').fadeOut(1000);
    });
  });
}

【讨论】：

【解决方案3】：

您是否尝试过使用较慢或较快的淡出值？似乎使用较慢的速度可能会有所帮助，但我还没有测试过，所以我不能肯定地说。也可以尝试将伪选择器 :visible 添加到调用中，以便它只选择当前可见的项目。示例：

$("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body:visible").fadeOut(1000, redirectPage);      
    });

【讨论】：

【解决方案4】：

我知道这已经很老了，但我只是遇到了同样的问题，我会投入两分钱。肯定是我正在淡入的元素（一个带有背景图像的 div 正在延迟加载 - 整个 div正在淡入）。

我的解决方案是把它放在自己的覆盖 div 中。然后问题就解决了。

我的覆盖 div，作为我一直在使用延迟加载的元素的第一个子元素：

<div 
  class="bgimg-overlay lazy"
  style="back"
  data-original="<?=$tpldir?>/img/LAST_FRAME_CROPPED.PNG"></div>

div 的 CSS：

.bgimg-overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

【讨论】：