HTML/Javascript - Welcome image cover that disappears after load - the web page partially reloads? -

so have completed i'm trying achieve - full screen welcome image appears on load per session , fades out on larger screens. removes scrollbars during display, , re-enables on completion.

problem is, when fades out, text & background colors load or reload. images , positioning loaded / fade fine.

any suggestions / ideas appreciated.

i have tried removing css / html leaves me believe 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         // show popup here         $.when($('#jpopup').show().delay(4000).fadeout(2000))         .done(function() {             document.documentelement.style.overflow = 'auto';  // firefox, chrome             document.body.scroll = "yes"; // ie          });        }    }); } 

i have tried $(document).ready instead of window.load etc.

you can pass completion callback fadeout itself.

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        $("#jpopup").show().delay(4000).fadeout(2000, function() {           // run upon fadeout completion           document.documentelement.style.overflow = 'auto';  // firefox, chrome           document.body.scroll = "yes"; // ie       });     }   }); } 

check working sample here: http://jsbin.com/liruxilupa