账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    nuxt.js 服务端渲染首屏需要等待较长时间才能使用
    41
    0

    原来的vue项目经过Nuxt.js改造之后出现一些问题
    首屏加载时候,列表数据在asyncData中获取,可以很快通过服务器渲染出来,但是此时页面处于无法操作的情况,还需要等待头部和其他一些并没有在asyncData中获取的数据在客户端渲染完成才能进行操作。
    对此不知道是首屏渲染时候是先需要等待客户端渲染然后等待客户端渲染完成才能操作?还是客户端渲染没有完成(列表图片还没有加载完成)的原因?要如何解决呢?
    还有一个关于上面提到的图片问题,图片列表通过服务端渲染要如何进行懒加载和加载未完成时候的处理?通过在页面组件的img标签使用@load判断图片是否加载完成切换预设图片,似乎并不能达到预期的效果:

    <template>
    <div>

    <img class="product-img" v-if="loading" :src="AList.product_img." @load="loadImg"  alt="img">
    <img v-else src="~assets/image/timg.gif"   alt="img">

    </div>
    <template>
    <script>

    export default{
        ...
        data(){
            return {
                loading:false
            }
        }
        ...
        loadImg () {
          this.loading = true
        },
    }

    </script>
    实际的效果是,服务端渲染直接显示列表数据图片,然后(应该是客户端渲染)显示预设图片,等到有图片加载完成后重新显示数据图片。
    图片是在components子组件中的,不是在page路由级页面中的

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 慵懒性子 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版