代码之家 › 专栏 › 技术社区 › LearningPath

如何在加载时固定Laravel页面和Carousel的高度?

carousel laravel css html php

LearningPath · 技术社区 · 6 年前

作为一个使用PHP的初学者,我经常遇到以下问题: 在加载我的页面的过程中,当图形尚未填充时,

页面底部显示在导航栏附近,然后页面调整为填充图形
光滑的传送带在水平前短暂垂直显示

此页面大小调整导致用户体验不佳。

如何在加载时固定页面大小?还是应该使用一个旋转器来等待整个页面准备就绪? 建议的厚度

用测试文件更新以重现错误:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

// Custom
@import "custom";

// Map
@import "map";

//use also JSON wizard for formatting

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>

    <!-- For the coins carousel -->
    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

</head>

<body>
<div id="header" class="container">
    <div>
        <div class="slider slider-nav">

    <!--see https://medium.com/wdstack/bootstrap-4-hidden-visible-dd969a4c5854,seems not worling as nt in Grid maybe?-->
    <!-- https://www.sshakil.com/blog/article/1/Make-bootstrap-carousel-dynamic-in-Laravel-->

                   <p>
                <img class="-logo-32x32" alt="" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-0" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-1" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-2" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-3" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-4" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-5" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-6" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-7" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-8" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-9" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-10" sizes="32x32">

          </p>
        

</div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/app/js/app.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script >
$(document).ready(function(){

 $('.slider-nav').slick({
   slidesToShow: 8,
   slidesToScroll: 1,

   dots: true,
   centerMode: true,
   autoplay: true,
   autoplaySpeed: 1000,
 });

});


</script>

</body>
</html>

我对谷歌图表也有同样的问题:在加载日期图表时,在占用预期空间之前,它们的占位符的高度为0。我可以在谷歌网站上看到 https://developers.google.com/chart/interactive/docs/gallery/columnchart 他们的图表显示需要一些时间,但占位符具有固定大小,并且具有响应性。

1 回复 | 直到 6 年前

tao 6 年前

FOUC

styles <body>

<head> <link>
< opacity:0; transform: opacity .5s ease-out 1

transform visibility display opacity

< max-height min-height

git issue
slick-slide <p> slick-slider

.slider p {
    display: none;
}
.slider p:first-child,
.slick-initialized.slider p {
    display: block;
}