Question

我正在使用node.js来构建单个页面应用程序。

在首页的顶部，我使用100vh css style以全屏显示某种颜色，然后在页面加载后，我创建了transition来加载图片。

我使用了这段代码：

JS

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

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

Answer 1

您可以使用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。

Answer 2

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

根据我的理解，您希望转换在您的应用中随时可用：

此代码工作正常（已经过测试）：

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

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

我希望它适用于您的代码。很高兴看到你的css代码的一些例子。现在，您可以使用上面的示例实现转换。

根据您的需要更改时间参数。

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

2 个答案: