在 ng-src 图像之前加载 Bootstrap 手风琴答案

【问题标题】：Load Bootstrap accordion before ng-src image在 ng-src 图像之前加载 Bootstrap 手风琴
【发布时间】：2016-05-20 07:54:15
【问题描述】：

我正在使用 Bootstrap 手风琴，在每个面板中，我使用 ng-repeat 列出员工，并使用 ng-src 为每个员工加载图像。单击面板时，员工的图像会加载一段时间，然后消失，然后在手风琴中打开。手风琴完全打开后如何让员工的图像加载。

这是一个列出员工的 sn-p：

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

【问题讨论】：

标签： angularjs twitter-bootstrap accordion

【解决方案1】：

您可以尝试将 ng-cloak 添加到您的手风琴中。 ng-cloak 在注入 DOM 元素之前等待范围变量准备好，因此在显示任何元素之前将等待整个数据准备好。该指令的链接如下：https://docs.angularjs.org/api/ng/directive/ngCloak

【讨论】：