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

Question

我在使用jQuery的fadeIn和fadeOut效果时遇到了问题。当脚本运行时，我的页面淡出，然后出现白色闪烁，最后我的新页面才淡入。这是这种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;
    }

});

提前感谢各位，非常感谢您的帮助。

帕特里克

- Patrick Ryan

---

在样式表中保持body的display:none，而不是在DomReady中。 - Ravi Soni

Answer 1

当fadeOut动画完成时，它会在body上设置display:none。这可能是你看到的白色闪烁的原因。尝试将整个页面包裹在一个body内的div中，并将该div淡出。

或者尝试应用以下CSS：

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

- Casey Flynn

Answer 2

白色闪烁是因为在.ready()函数被触发之前的那几个时刻，您的body元素正在显示。这在慢速连接下会更加严重。

相反，您可以尝试在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);
    });
  });
}

- Wheeyls

Answer 3

我知道这已经有点老了，但我刚遇到了同样的问题，想要提供我的建议。问题肯定是因为我正在淡入的元素（一个带有背景图像的div，该图像正在被懒加载 - 整个div正在淡入）。

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

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

<div 
  class="bgimg-overlay lazy"
  style="back"
  data-original="<?=$tpldir?>/img/LAST_FRAME_CROPPED.PNG"></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;
}

- dmgig

Answer 4

你尝试过使用更慢或更快的fadeOut值吗？似乎使用较慢的速度可能会有所帮助，但我还没有测试过，所以不能确定。也可以尝试在调用中添加伪选择器:visible，这样它只会选择当前可见的项目。例如：

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

- pinmonkeyiii