각도가 느린 배경 이미지를로드하는 속도가 느립니까?

Question

ng-click을 사용하여 span 태그의 배경 이미지를 변경하고 있습니다. 이미지를 처음 변경하면로드하는 데 2 ​​~ 2 초가 걸립니다. 그러나 이미지 사이를 앞뒤로 번갈아 사용하면 완벽합니다. 두 이미지는 약입니다. 그래서 크기가 문제라고 생각하지 않습니다.

모바일 용 모퉁이 앱을 만들고 있습니다. 크롬의 모바일 에뮬레이터에서 이미지가 완벽하게로드됩니다. 모바일 장치에서만 문제가 나타납니다.

<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; 
} 

이것은 모바일 문제일까요? 아니면 잘못된 지시문을 사용하고 있습니까?

Answer 1

각도 또는 지시문 자체에 문제가 있다고 생각하지 않습니다. 성능에 영향을 줄 수있는 많은 것들이 있습니다. 기기가 원활하게 실행될 수 있다고 생각되면 Chrome 디버거의 타임 라인을 통해 해당 내용을 조사 할 수 있습니다.

크롬 에뮬레이터는 성능을 반영하지 않아야합니다. html/css 부분에 유용합니다.

Answer 2

문제는 ng-model 바인딩과 관련이 있습니다. 또한 크롬 에뮬레이터를 반영하지 않아야합니다. html/css 부분에 유용합니다.