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元素之前，ng-cloak等待范围变量准备就绪。因此，在显示任何元素之前，将等待整个数据准备就绪。指令的链接如下：https://docs.angularjs.org/api/ng/directive/ngCloak

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

1 个答案: