Загрузить бутстрап аккордеон перед ng-src image

Question

Я использую аккордеон Bootstrap и внутри каждой панели. Я перечисляю сотрудников, используя ng-repeat, и для каждого сотрудника я загружаю изображение с помощью ng-src. Когда нажимается панель, изображение работника в течение некоторого времени исчезает, а затем открывается в аккордеоне. Как я могу сделать загрузку изображения сотрудника после того, как аккордеон открывается полностью.

Это фрагмент списка сотрудников:

<div id="newly-on-board" class="panel-collapse collapse in"> 
    <div class="panel-body"> 
     <ul style="list-style: none;"> 
      <li> 
       <div class="row"> 
        <div class="col-lg-2 col-xs-2"> 
         <b>Name</b> 
        </div> 
        <div class="col-lg-3 col-xs-3"> 
         <b>Job Title</b> 
        </div> 
        <div class="col-lg-3 col-xs-3"> 
         <b>Image</b> 
        </div> 
        <div class="col-lg-4 col-xs-4"> 
         <b>Description</b> 
        </div> 
       </div> 
      </li> 
      <li data-ng-repeat="employee in EmployeesToDisplay"> 
       <a style="cursor: pointer"> 
        <div class="row"> 
         <div class="col-lg-2 col-xs-2"> 
          {{employee.Name}} 
         </div> 
         <div class="col-lg-3 col-xs-3"> 
          {{employee.JobTitle}} 
         </div> 
         <div class="col-lg-3 col-xs-3"> 
          <img class="img-responsive img-circle center-block" width="200" height="200" data-ng-src="{{getImageUrl(employee)}}" /> 
         </div> 
         <div class="col-lg-4 col-xs-4"> 
          {{employee.Description}} 
         </div> 
        </div> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Вы можете попробовать добавить нг-плащ на свой аккордеон. ng-cloak ожидает, что переменная области видимости будет готова до ввода DOM-элемента &, поэтому будет ждать, пока все данные будут готовы, прежде чем отображать какие-либо элементы. Ссылка на директиву приведена ниже: https://docs.angularjs.org/api/ng/directive/ngCloak