Nano Hash - криптовалюты, майнинг, программирование

CSS загружается медленно и вызывает временное странное форматирование в приложении Laravel с Blade и Vue

У меня есть приложение Laravel, которое использует немного кода Vue в шаблонах блейдов. Возникает проблема с переходом от представления к представлению, почти каждый раз, когда возникает небольшая задержка перед загрузкой CSS, когда необработанный текст страницы отображается без какого-либо форматирования. Он отображается около 1/2 секунды, а затем срабатывает CSS, и он выглядит правильно. Я не могу найти причину этого, я пытался изменить микс ('css/app.css') и т. д., чтобы не приходилось каждый раз перезагружать его, но я не могу понять, как это исправить.

Я не уверен, что Vue как-то задерживает загрузку css? Есть идеи что это может быть? Я вставлю верхнюю часть шаблона лезвия ниже. Я только что обновился до Laravel 8, но то же самое происходило и с Laravel 7.

Спасибо за вашу помощь!

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="title" content="Pono Admin">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Admin</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <link href="{{ mix('css/admin.css') }}" rel="stylesheet">
    @hasSection('style')
        @yield('style')
    @endif

    <!-- Scripts -->
    @hasSection('script')
        @yield('script')
    @else
        <script>
            var vmMixinsAdmin = '';
        </script>
    @endif
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <script>
        var vmMixinsApp = '';
        let vroundedBtn = false;
        let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
    </script>
</head>

<body>

    <div id="vm">

        <main id="app-main" class="container-fluid px-0">

        etc

  • Это, вероятно, не будет иметь ничего общего с Vue 17.09.2020
  • Не уверен, что это причина, но может быть это связано с тем, что рендеринг компонента Vue выполняется до того, как стили из html-файла будут применены к компоненту? Может быть, вы можете вместо этого попробовать поместить стили в свой компонент Vue? 17.09.2020

Ответы:


1

У кого-то было что-то подобное, и он решил показать оверлей на переднем плане и скрыть его после загрузки страницы. Я не уверен, что это лучшее решение, но это может помочь:

Заставить браузеры загружать CSS перед отображением страницы

17.09.2020
  • спасибо @Octet! В итоге я сделал примерно это. На случай, если кто-то еще попытается это сделать, в app.js я добавил это в раздел данных: vueAppLoading: true, а это в созданный раздел: this.vueAppLoading = false; И в макетах/приложении Laravel я просто обернул всю страницу в ‹template v-if=!vueAppLoading›, поэтому он скрывает все, пока Vue не завершит загрузку, а затем покажет это. Кратковременно спрятанный контент совершенно не заметен, он так быстро загружается, но проблем с отображением неправильной стилизации больше нет :) 04.12.2020
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..