每当我进入我之前没有进入当前会话的路径时,页面加载并且样式仅在呈现页面后约2秒应用。这导致CSS闪烁(即FOUC),并且在用户体验方面根本不好。
要解决这个问题,我能想到的最好的方法是只在加载完成后呈现页面。
我怎样才能做到这一点?
此外,还有一些其他CSS问题,可能与上述有关:
以下是该问题的实例:http://archy-user.name/
单击“名称搜索”或“权重表”时,首先呈现页面内容,然后应用CSS。其他两页不会发生这种情况。我没有将任何CSS框架附加到其他两个,只有“名称搜索”和“权重表”。
似乎这就是问题,但我该如何解决这个问题呢?
另一个问题是,如果在“名称搜索”或“权重表”页面中刷新页面,则根本不加载CSS框架,尽管普通的CSS是。
这两个问题的根源似乎是CSS框架,考虑到没有它们的页面工作正常。
有谁知道如何修复或解决这个问题?
以下是我的组件的结构,示例中的“权重表”:
<template>
<div class="weightconverter-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="display-4 text-center mb-3"> Weight Converter </h1>
<form>
<div class="form-group">
<input type="number" class="form-control form-control-lg" id="filter" placeholder="Input weight..." @input="calculate">
</div>
</form>
<div id="results">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Weightconverter',
methods: {
calculate
},
head: {
link: [
{
rel: 'stylesheet',
type: 'text/css',
href: 'css/bootstrap.min.css'
}
]
},
created() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 200)
})
}
}
function calculate(e) {
let value = e.target.value;
let results = document.getElementById('results');
let kilograms = Math.round(value / 2.205);
let grams = Math.round(value * 453.592);
let ounces = Math.round(value * 16);
results.innerHTML = `
<div class="card text-white bg-primary mb-3">
<div class="card-header">
Grams:
</div>
<div class="card-body">
<str>`+grams+`</str></div>
</div>
<div class="card text-white bg-success mb-3">
<div class="card-header">
Kilograms: </div>
<div class="card-body">
<str>`+kilograms+`</str></div>
</div>
<div class="card text-white bg-danger mb-3">
<div class="card-header">
Ounces:
</div>
<div class="card-body">
<str>`+ounces+`</str></div>
</div>
`
}
</script>
<style scoped>
.weightconverter-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: dodgerblue;
top: 0;
left: 0;
}
.container {
position: relative;
margin-top: 15%;
}
h1 {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.5);
}
</style>
PS - 重新加载不仅在远程服务器上工作,在localhost重新加载工作正常。 (虽然还有FOUC)
PS2 - 项目是用“npm run generate”构建的
您可以添加条件渲染以在加载数据时进行渲染。 https://vuejs.org/v2/guide/conditional.html