1ページアプリケーションでwindow onloadを使用するにはどうすればよいですか？

Question

私はnode.jsを使用して、単一のページアプリケーションを構築しています。

私は100vh css styleを使用してフルスクリーンで色を表示し、ページが読み込まれた後に画像をロードするためにtransitionを作成しました。

私はこのコードを使用：

$('body').addClass('is-loading'); 
$(window).on('load', function() { 
    $('body').removeClass('is-loading'); 
}); 

JS

をしかし、single page application doesn'tは、それがロードした後、再びロードする必要があります。だから、私の質問は、node.jsを使ってこの移行を達成する方法です。代わりがありますか？

Answer 1

ウィンドウのロードは、静的なWebページで正常に動作します。単一のページアプリケーションではsetTimeout（可能な解決策の1つとして）をremoveClassに使用できます。私はあなたがトランジションアプリ内の任意の時間を作品たい理解し何のため

：

このコードは正常に動作します（既にテストされている）：

if (! $('body').is('.is-loading')) { 
    $('body').addClass('is-loading'); 
} 

setTimeout(function() { 
    $('body').removeClass('is-loading'); 
}, 1000) 

私はそれはあなたのコードで動作します願っています。あなたのCSSコードのいくつかの例を見ることは素晴らしいことでしょう。今のところ、上記の例で遷移を達成することができます。

必要に応じて時間パラメータを変更します。

Answer 2

localStorageを使用できます。

使用ネイティブjsが

localStorage.setItem('myToggle', isLoaded); 

に近づき、その後、あなたはのgetItemを使用して、同じローカルストレージから取得し、作成したのlocalStorageアイテムの名前を指定します。

var isItAlreadyLoaded = localStorage.getItem('myToggle'); 

ので

window.onload = function(){ 
    var isItAlreadyLoaded = localStorage.getItem('myToggle'); 
    if(isItAlreadyLoaded == 'true'){ 
    console.log('already loaded'); 
    } 
    else{ 
    //load image here 
    //..... 

    var isLoaded = 'true'; 
    localStorage.setItem('myToggle', isLoaded); 
    console.log('saved!'); 
    } 
} 

これは魔法のように動作します。 localStorageはブラウザのミニストレージの一種で、各ストレージ変数はブラウザに応じて最大5〜10MBを保持できます。現代のブラウザではうまくいきます。

私が行ったのは、画像がすでにロードされているかどうかを確認するブール変数を入れたか、単にlocalStorageの存在をチェックすることでした。