Как зафиксировать высоту страницы Laravel и карусели при загрузке? - PullRequest
Новая
       7

Как зафиксировать высоту страницы Laravel и карусели при загрузке?

0 голосов
/ 10 июня 2018

Как новичок в 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>

У меня та же проблема с диаграммой Google: во время загрузки диаграммы их даты их заполнитель находится на высоте 0 перед тем, как занять ожидаемое место.Я вижу на веб-сайте Google https://developers.google.com/chart/interactive/docs/gallery/columnchart, что их диаграмма занимает некоторое время, но заполнитель имеет фиксированный размер и отзывчив.

1 Ответ

0 голосов
/ 10 июня 2018

Исходный, общий ответ:

Вы, вероятно, испытываете FOUC .

Это потому, что вы загружаете styles для своих элементов внутри элемента <body>, после того, как стилируемые элементы были обработаны.

Существует (как минимум) два возможных исправления:

  • либо переместите загрузку правил вашего стиля в <head> (и используйте <link>)
  • или укажите <body> opacity:0; transform: opacity .5s ease-out и после загрузки стилей измените его непрозрачность на 1.

Очевидно, что transform и его подчиненные свойства являются необязательными.Если вы не хотите переход, вы можете также использовать свойства visibility или display вместо opacity.

Кроме того, вместо нацеливания на все (<body>), вы можете просто нацелиться на элементы, вызывающие FOUC, и любые последующие элементы в DOM, которые также могут быть затронуты.Чтобы ограничить влияние элементов стиля на их братьев и сестер, можно использовать max-height и min-height на них, но имейте в виду, что это необходимо сделать с учетом отзывчивости (должно работать на всех ширинах устройства).

Конкретный ответ (после добавления MCVE):

Если посмотреть дальше, это не классический случай FOUC, а псевдо-FOUC (стили меняются в JavaScript при инициализации Slick).Я обнаружил эту проблему git , предоставляющую несколько решений.
Оказывается, размещение класса slick-slide на каждом из ваших классов <p> и slick-slider на родительском элементе скрывает слайды до того, как Slick станетинициализируется, таким образом устраняя псевдо-FOUC.

В качестве альтернативы, , если вы не хотите добавлять эти классы в свою разметку (и использовать существующий CSS Slick), вы можете добавить это к своему собственному CSS: 

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

... с учетом текущей разметки.

...