jQueryのプリローダとセッションストレージの問題を解決するにはどうすればよいですか？

Question

プリローダーに問題があります。私はセッションごとに1回設定しようとしていました。初めて動作しますが、ウェブサイトをリフレッシュすると、プリローダーはまったく停止せず、セッションストレージからデータを削除する瞬間までは、ウェブサイトのコンテンツを見ることは不可能です。スタイルシートにvisibility: invisibleを追加しても機能しません。

canvas { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #000000; 
    z-index: 99; 
} 

<canvas id="c"><img id="logo" width="1280" height="1024" alt="logo"></canvas> 
<div> 
    content 
</div> 

if (sessionStorage.getItem('dontLoad') == null){ 
    jQuery("#c").delay(1000).fadeOut('slow', function(){ 
    jQuery("body").animate({ 
     visibility: visible 
    }, 1000); 
    }); 
    sessionStorage.setItem('dontLoad', 'true'); 
} 

Answer 1

問題は、CSSを変更する必要があるということです。私は説明しようとします。

CSSでは、キャンバスをdisplay: noneに設定しています。あなたのjQueryでは、fadeOutのアニメーションを使用しようとします。これは、要素が表示されないため、基本的に文書から削除されるため、jQueryはそれを変更できません。

キャンバスをdisplay: blockに設定する必要があります。ユーザーがウェブサイトにアクセスしたときに「プリローダー」が表示されるようにします。その後、「プリローダー」が消えてしまいます。

ここに更新されたCSSがあります。

canvas { 
    display: block; 
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background-color: #000000; 
    z-index: 99; 
} 

はJavaScript

if (sessionStorage.getItem('dontLoad') == null) 
{ 
    jQuery("#c").delay(1000).fadeOut('slow', function() 
    { 
     jQuery("body").animate({ 
      visibility: visible 
     }) 
    }, 1000); 
} 

if (sessionStorage.getItem('dontLoad') == true) 
{ 
    $('#c').css('display', 'none'); 
}