HTML/Javascript - 加載後消失的歡迎圖片封面 - 網頁部分重新加載？

Question

所以我幾乎完成了我想要實現的目標 - 每個會話都會出現一個全屏歡迎圖像，並在大屏幕上淡出。 它還會在顯示過程中移除滾動條，並在完成時重新啓用。

問題是，當它淡出時，任何文本&背景顏色加載或重新加載。圖像和定位已經加載/淡入淡出。

任何建議/想法非常感謝。

我已經嘗試刪除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

您可以通過完成回調與淡出本身。

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