Question

在我的Vue应用程序中，我有一个大图像（170K），在CSS中作为背景图像引用。当我的应用程序最初加载时，我想显示一个微调器图像或div，等待此图像加载完毕。这似乎是Angular2 +中的默认行为，我如何用Vue实现相同的效果？

CSS看起来像这样：

.hero-image {
  background-image: url(../assets/images/bigimage.jpg);
  background-repeat:no-repeat;
  background-position: 0px -150px;
  background-size: 1920px 1080px;  
}

编辑：到目前为止，我已经尝试了以下内容，但它没有奏效。 HTML / CSS / Component仍然在该背景图像加载完成之前加载：

window.addEventListener('load', function (event) {
    new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
  })
})

Answer 1

在没有听众的情况下尝试此操作

new Vue({
    el: '#app',
    router,
    template: '<App v-cloack />',
    components: { App }
  })

Vue等待，直到CSS中引用的所有图像都已加载

1 个答案: