如何在单个页面应用程序中使用window onload？

我正在使用node.js为了build立一个单一的页面应用程序。

在首页的顶部，我使用了一个100vh css style来全屏显示一些颜色，然后在页面加载之后，我创build了一个加载图像的transition 。

我用这个代码：

JS

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

但是， single page application在加载后不需要再次加载。 所以，我的问题是如何使用node.js来实现这个转换？ 有其他select吗？

Answer 1

Window onload在静态网页中可以正常工作。 在单页面应用程序中，可以使用setTimeout （作为一种可能的解决scheme）来removeClass 。

对于我所理解的，您希望随时在您的应用中进行转换：

此代码工作正常（已经testing）：

 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从相同的本地存储中检索，然后指定所创build的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是某种浏览器的迷你存储，根据浏览器的不同，每个存储variables最多可以容纳5〜10mb。 它适用于大多数现代浏览器。

我所做的只是放了一个布尔variables来检查图像是否已经加载，或者只是检查localStorage的存在。