ページが完全にロードされたときに正しい場所に移動する前に、ページ内の要素が最初にランダムな場所に表示されます。これはまったく優雅ではありません。正しい場所に直接表示してほしい。これは、CSS の前にページ内の要素が読み込まれるためだと思いますか?
私は Symfony2 プロジェクトで less と assetic を使用していますが、要素が正しい場所に直接表示されるようにするにはどうすればよいですか?
CSSアセットを処理する方法は次のとおりです。
{% block stylesheets %}
{% stylesheets
filter='less, ?yui_css'
output='bundles/yopyourownpoet/css/bootstrap.css'
'@YOPYourOwnPoetBundle/Resources/public/less/bootstrap.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}
{% stylesheets
filter='less, ?yui_css'
output='bundles/yopyourownpoet/css/bootstrap-responsive.css'
'@YOPYourOwnPoetBundle/Resources/public/less/responsive.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}
<link rel="stylesheet/less" href="{{ asset('bundles/yopyourownpoet/less/bootstrap.less') }}">
<link href="{{ asset('bundles/yopyourownpoet/css/layout.css') }}" type="text/css" media="screen" rel="stylesheet" />
<link href="{{ asset('bundles/yopyourownpoet/css/style.css') }}" type="text/css" media="screen" rel="stylesheet" />
<link href="{{ asset('bundles/yopyourownpoet/css/jquery.cluetip.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}