Мерцание стилей при загрузке страницы Yii2

Вопросы по вёрстке и JavaScript
Ответить
voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.04.28, 10:25

Доброго времени! Работаю с формами в yii2 и столкнулся с такой проблемой

http://skrinshoter.ru/v/280418/RGph0ukW?a

Там где есть форма, в модальном окне, или просто выводится на страницу, не важно, при загрузки сайта будет все плыть и мерцать, что очень сильно портит вид загрузки. В чем проблема понять не могу. Использую ActiveForm + всем известный LoginFormModel. Ничего умного почти не делал, за исключением переписи класса User (ActiveRecord). Менял генерацию соли и хэша пароля на свои. Все формы работают, но с загрузкой страниц беда.

Аватара пользователя
BrusSENS
Сообщения: 496
Зарегистрирован: 2012.07.26, 06:51
Откуда: Новороссийск
Контактная информация:

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение BrusSENS » 2018.04.28, 15:26

Проблема в стилях или клиентских скриптах. Их код в студию.
voinmerk писал(а):
2018.04.28, 10:25
Менял генерацию соли и хэша пароля на свои.
А вот это попахивает потенциальной дырой в безопасности.
Native Web - небольшой блог о веб разработке (временно на ремонте)
Режим обслуживания сайта для Yii 2.x.x

urichalex
Сообщения: 857
Зарегистрирован: 2015.08.07, 11:03

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение urichalex » 2018.04.28, 16:48

Тут yii не при чем. Что-то в js и/или стилях намудрено

SindBad
Сообщения: 76
Зарегистрирован: 2015.06.18, 10:53

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение SindBad » 2018.04.28, 21:33

Проверьте, скорее всего у Вас многократно загружаются одни и те же файлы стилей. Вероятно, там, где подгружается AJAX'ом HTML.

voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.04.30, 07:51

Уважаемые, кодеры! В общем, проблема мне кажется в формах и их настройках.

Говоря о потенциальной дыре в безопасности, утверждать обратное не буду, но переписать шифрование паролей было необходимо для совместимости сайта с форумом на платформе IPBoard, а там шифрование "хиханьки, да хаханьки", когда первый раз столкнулся с php шифровал лучше.

Ладно! Самая интересная задача. В общем, формы выгружаются в представлениях через класс "ActiveForm". Думаю вы все с ним знакомы. В видео, из первого поста лаги стилей были на всех страницах из-за выставленного в layouts/main.php виджета с формой авторизацией. Когда мы проходим авторизацию, виджет больше не генерируется, соответственно лаги прекращаются. По этому это НЕ в стилях проблема.

Кроме авторизации, на данный момент на сайте существует ещё лишь одна форма, форма смены пароля в личном кабинете юзера, и соответственно переходя на страницу с формой, происходят лаги.

На данный момент предполагаю что проблема в моделях, а не в формах. Так как прежде чем подключится представление, сработает action страницы с формой и подключится модель + произойдёт вызов каких то методов, например getUser, хотя там вообще чисто. Проверю теорию.

voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.04.30, 08:06

Ещё немного информации. Прежде чем заняться этим проектом, для повышения навыков в yii2, делал интернет магазин по видео-уроку. Сейчас запустил локальный проект и увидел что та же беда со страницей авторизации. Только там я вообще не трогал её. Всё таки может быть проблема в AppAssets и подключаемых скриптах.

Код: Выделить всё

<?php
namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/animate.css',
        'css/flexslider.css',
        'css/font-awesome.min.css',
        'css/magnific-popup.min.css',
        'css/magnific-popup-animate.css',
        'css/site.css',
    ];
    public $js = [
        'js/jquery.flexslider.js',
        'js/jquery.wow.min.js',
        'js/jquery.magnific-popup.min.js',
        'js/index.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        '\rmrevin\yii\fontawesome\AssetBundle',
    ];
}

urichalex
Сообщения: 857
Зарегистрирован: 2015.08.07, 11:03

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение urichalex » 2018.04.30, 10:37

Как PHP может влиять на события js?
У вас стили пляшут на ховерах да фокусах

Аватара пользователя
BrusSENS
Сообщения: 496
Зарегистрирован: 2012.07.26, 06:51
Откуда: Новороссийск
Контактная информация:

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение BrusSENS » 2018.04.30, 18:53

voinmerk писал(а):
2018.04.30, 07:51
Говоря о потенциальной дыре в безопасности, утверждать обратное не буду, но переписать шифрование паролей было необходимо для совместимости сайта с форумом на платформе IPBoard, а там шифрование "хиханьки, да хаханьки", когда первый раз столкнулся с php шифровал лучше.
Для этого вполне подходят методы шифрования Yii из коробки. Или, если есть php 7 - то password_hash().
voinmerk писал(а):
2018.04.30, 07:51
На данный момент предполагаю что проблема в моделях, а не в формах. Так как прежде чем подключится представление, сработает action страницы с формой и подключится модель + произойдёт вызов каких то методов, например getUser, хотя там вообще чисто. Проверю теорию.
Смотрите стили или скрипты. Модель тут не при чём.
Native Web - небольшой блог о веб разработке (временно на ремонте)
Режим обслуживания сайта для Yii 2.x.x

voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.05.02, 08:57

Отключил все свои js скрипты и даже плагины, вроде magnific-popup.js и wow.js. Эффект тот же! Говорю же, те представления что отображают формы через ActiveForm, так же загружаются, как и на видео. Там где нет этих форм, нет проблем. В момент "Гостя" форма с логином выводится в модальном окне на всех страницах, соответственно на всех страницах такие лаги, после авторизации, подобные лаги только на странице доната и странице настроек в ЛК (форма смены пароля). Да скорее всего проблема в JS и CSS, но не в моих скриптах и стилях, а в движке или его настройках. Я вот по этому и обратился, что где и как настроить, кто сталкивался с такой проблемой.

voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.05.02, 09:08

Как я проверил, влияют ли мои скрипты:

Код: Выделить всё

<?php
namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        //'css/animate.css',
        //'css/flexslider.css',
        //'css/magnific-popup.min.css',
        //'css/magnific-popup-animate.css',
        'css/site.css',
    ];
    public $js = [
        //'js/jquery.flexslider.js',
        //'js/jquery.wow.min.js',
        //'js/jquery.magnific-popup.min.js',
        //'js/index.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        '\rmrevin\yii\fontawesome\AssetBundle',
    ];
}
Результат:

http://skrinshoter.ru/v/020518/zxfHYp7K?a

Теперь после авторизации:

http://skrinshoter.ru/v/020518/4ZrohHDH

andku83
Сообщения: 931
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение andku83 » 2018.05.02, 12:09

А если убрать еще и ваш `css/site.css`, а его содержимое вставить inline в header страницы?

Аватара пользователя
BrusSENS
Сообщения: 496
Зарегистрирован: 2012.07.26, 06:51
Откуда: Новороссийск
Контактная информация:

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение BrusSENS » 2018.05.02, 19:47

voinmerk писал(а):
2018.05.02, 09:08
Как я проверил, влияют ли мои скрипты:
Ctrl + F5 - Чистим кэш браузера.

Код вывода формы в студию.

P.S.: Судя по всему, у вас форма подгружается со всеми стилями заново, отсюда и такое поведение.
Native Web - небольшой блог о веб разработке (временно на ремонте)
Режим обслуживания сайта для Yii 2.x.x

voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.05.04, 16:08

BrusSENS писал(а):
2018.05.02, 19:47
voinmerk писал(а):
2018.05.02, 09:08
Как я проверил, влияют ли мои скрипты:
Ctrl + F5 - Чистим кэш браузера.

Код вывода формы в студию.

P.S.: Судя по всему, у вас форма подгружается со всеми стилями заново, отсюда и такое поведение.

Код: Выделить всё

<?php
 
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\bootstrap\Modal;
 
Modal::begin([
    'header'=>'<h4>' . Yii::t('app', 'Sign In') . '</h4>',
    'id'=>'login-modal',
]);
?>
 
<p><?= Yii::t('app', 'Please fill out the following fields to login:') ?></p>

<?php $form = ActiveForm::begin([
    'id' => 'login-form', 
    'enableAjaxValidation' => true, 
    'action' => ['account/ajax-login']
]); ?>

<?= $form->field($model, 'username')->textInput(['autofocus' => true]) ?>

<?= $form->field($model, 'password')->passwordInput() ?>

<?= $form->field($model, 'reCaptcha')->widget(\himiklab\yii2\recaptcha\ReCaptcha::className(),[
    'name' => 'reCaptcha',
    'siteKey' => 'publickey',
    'widgetOptions' => ['class' => 'col-sm-offset-3'],
]) ?>

<?= $form->field($model, 'rememberMe')->checkbox() ?>

<div style="color:#999;margin:1em 0">
    <?= Yii::t('app', 'If you forgot your password you can') ?> <?= Html::a(Yii::t('app', 'reset it'), ['account/request-password-reset']) ?>.
</div>

<div class="form-group">
    <?php

    echo Html::button(Yii::t('app', 'Cancel'), ['class' => 'btn btn-default', 'data-dismiss' => 'modal']);
    echo Html::submitButton(Yii::t('app', 'Sign In'), ['class' => 'btn btn-primary pull-right', 'name' => 'login-button']); 

    ?>
</div>

<?php ActiveForm::end(); ?>
<?php Modal::end(); ?>
Изображение

voinmerk
Сообщения: 13
Зарегистрирован: 2018.04.16, 08:07

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение voinmerk » 2018.05.05, 08:35

Зашёл на ещё один свой проектик. Там так же стоит шаблон basic, перешёл на форму авторизации (она вообще дефолтная, ничего не менял) и обнаружил ровно такое же мерцание, только более шустрое ибо ещё нет никаких анимаций и прочего.

Спасите от этой засады!! Пожалуйста :(

Если есть другие решения по мимо ActiveForm, я их срадостью приму. То как ведёт себя страница где используется этот компонент, явно не в моих настройках проблема, просто какой то кривой скрипт. Ещё зависит от браузера, в yandex нет таких проблем, в google есть и в firefox. Другие не тестировал.

Аватара пользователя
BrusSENS
Сообщения: 496
Зарегистрирован: 2012.07.26, 06:51
Откуда: Новороссийск
Контактная информация:

Re: Мерцание стилей при загрузке страницы Yii2

Сообщение BrusSENS » 2018.05.05, 17:12

voinmerk писал(а):
2018.05.05, 08:35
Зашёл на ещё один свой проектик. Там так же стоит шаблон basic, перешёл на форму авторизации (она вообще дефолтная, ничего не менял) и обнаружил ровно такое же мерцание, только более шустрое ибо ещё нет никаких анимаций и прочего.
Вот в том то и дело. Я заходил на ваш тестовый проект. Мерцаний никаких у меня нет. Консоль чистая. Проверил в нескольких браузерах. Есть подозрения, что беда, непосредстенно в софте (читай в браузере). Проверяйте окружение. Кажется, что какие-то скрипты добавляются браузером.

P.S.:
voinmerk писал(а):
2018.05.05, 08:35
Зашёл на ещё один свой проектик.
Не используйте уменьшительно-ласкательные для слова проект) Так, просто совет) Проект будь он маленьким или сверхогромным - всегда остаётся проектом)
Native Web - небольшой блог о веб разработке (временно на ремонте)
Режим обслуживания сайта для Yii 2.x.x

Ответить