javascript - HTML/Javascript - 加载后消失的欢迎图像封面 - 网页部分重新加载？

Question

因此，我几乎完成了我想要实现的目标 - 全屏欢迎图像，该图像在每次 session 加载时出现，并在大屏幕上淡出。 它还会在显示期间删除滚动条，并在完成时重新启用。

问题是，当它淡出时，任何文本和背景颜色都会加载或重新加载。图像和定位已经加载/淡入淡出。

非常感谢任何建议/想法。

我已经尝试删除 css/html 所以它让我相信它是 javascript 的东西。

if ($(window).width() > 769) {
   $(window).load(function() {
      var isshow = sessionStorage.getItem('isshow');
      if (isshow== null) {
        sessionStorage.setItem('isshow', 1);
        document.documentElement.style.overflow = 'hidden';  // firefox, chrome
        document.body.scroll = "no"; // ie only
        // Show popup here
        $.when($('#jPopup').show().delay(4000).fadeOut(2000))
        .done(function() {
            document.documentElement.style.overflow = 'auto';  // firefox, chrome
            document.body.scroll = "yes"; // ie only
         });
       }
   });
}

我也尝试过 $(document).ready 而不是 window.load 等。

Answer 1

您可以通过 fadeOut 本身传递完成回调。

if ($(window).width() > 769) {
  $(document).ready(function() {
    var isshow = sessionStorage.getItem('isshow');
    if (isshow == null) {
      sessionStorage.setItem('isshow', 1);
      document.documentElement.style.overflow = 'hidden';  // firefox, chrome
      document.body.scroll = "no"; // ie only

      $("#jPopup").show().delay(4000).fadeOut(2000, function() {
          // will run upon fadeout completion
          document.documentElement.style.overflow = 'auto';  // firefox, chrome
          document.body.scroll = "yes"; // ie only
      });
    }
  });
}

在此处检查工作示例:http://jsbin.com/liruxilupa