角度ng级慢加载背景图像?

时间:2014-04-01 09:08:36

标签: css angularjs background-image

我使用ng-click更改span标记的背景图像。在第一次更改图像时,需要一两秒钟才能加载。但是然后在图像之间来回交替是完美的。两张图片都是约。 500字节,所以我不认为尺寸是个问题。

我正在开发适用于移动设备的角度应用。在我的Chrome中的移动模拟器中,图像加载完美。仅在移动设备上才会出现问题。

    <div class="data_table" ng-click="collapsed = !collapsed">
        <table>
        <tr class="top_row">
              <td>
                <div>
                    Data
                </div>
              </td>
              <td>
                <span ng-class="!collapsed ? 'collapse_icon' : 'expand_icon'"></span>
              </td>
       </tr>
   </div>



.collapse_icon {
    font-size: 22px;
    line-height: 18px;
    font-weight: bold;
    float:left;
    width: 5%;
    color: #000;
    height: 22px;
    width: 22px;
    background-image: url(../images/collapse2.png);
    background-repeat: no-repeat;
    background-size: 22px 22px;
    padding-right: 2px;
}

.expand_icon {
    font-size: 22px;
    line-height: 18px;
    font-weight: bold;
    float:left;
    width: 5%;
    color: #000;
    height: 22px;
    width: 22px;
    background-image: url(../images/expand2.png);
    background-repeat: no-repeat;
    background-size: 22px 22px;
    padding-right: 2px;
}

这只是一个移动问题,还是我使用了错误的指令?

2 个答案:

答案 0 :(得分:1)

我不认为这是角度或指令本身的问题。有很多事情会影响性能。如果您认为您的设备可以顺利运行,您可以通过Chrome调试器中的时间轴检查引擎盖下发生的情况。

此外,您不应该依赖Chrome的模拟器来提高性能,因为它没有反映出来。它对html / css部分很有用。

答案 1 :(得分:1)

问题在于ng-model绑定,你不应该依赖Chrome的模拟器来提高性能,因为它没有反映出来。它对html / css部分很有用。