Question

我的页面中的元素首先出现在随机位置，然后在页面完全加载时移动到正确的位置。这根本不是优雅的。我希望他们直接出现在正确的地方。我猜这是因为页面中的元素是在我的css之前加载的？

我在Symfony2项目中使用较少且资产丰富，如何处理它以使元素直接出现在正确的位置？

以下是我处理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 %}

Answer 1

我回答了你之前的问题。这是这个答案，记得按照之前的说法运行相同的命令。

{% block stylesheet %}

{% spaceless %}
<!-- global css -->
{% stylesheets
filter='less,?yui_css'
        '../vendor/twitter/bootstrap/less/bootstrap.less'
        '../vendor/twitter/bootstrap/less/responsive.less'
    %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

{% endspaceless %}
<link href="{{ asset('bundles/bm/css/style.css') }}" type="text/css" rel="stylesheet"/>
<link href="{{ asset('bundles/bm/css/profile.css') }}" type="text/css" rel="stylesheet"/>
{% endblock stylesheet %}

Answer 2

我现在用节点预编译我的css文件，不再使用less.js脚本了。

这解决了问题，元素现在直接出现在页面的正确位置。

在页面完全加载之前，元素出现在错误的位置

2 个答案: