Question

问题描述：我有一个电子商务应用程序，我必须加载很多产品图像。我们使用200 * 200图像作为小图像，但有大小为600 * 600的模态，点击任何产品时都会出现。

问题是，当加载每个页面时，所有图像（200 * 200和600 * 600）都会被加载，这使得应用程序太慢。

问题：有没有办法避免在点击之前加载（600 * 600）图像。我希望应用程序最初只加载200 * 200图像，并根据要求加载任何600 * 600图像。

技术:( Jade，Angularjs，Nodejs）

代码：

<div ng-repeat="product in category.products | filter:query | orderBy: 'productName'">
    <div class="panel-default panel thumbnail" id="imgs">
        <div class="panel-body">
            <a href="#" data-target="#img_modal{{product._id}}" data-toggle="modal">
                <img class="img-responsive center-block" ng-src="{{product.productImage_tn}}" alt="" id="items" />
            </a>
            <div class="modal" id='img_modal{{product._id}}' tabindex='-1' role='dialog' area-hidden='true'>
                <div class="modal-dialog" style="width: 630px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4>{{ product.productName }}
                                <button class="close" type='button' data-dismiss='modal' area-hidden='true'>  &times;</button>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <img ng-src="{{product.productImage_600}}" style=" position: relative; height: 400px;" class="img-responsive center-block">
                        </div>
                        <div class="modal-footer">
                            <div class="row">
                                <div class="col-sm-4 col-md-4">
                                    <h4>$ {{ product.productPrice }} {{ product.productUnit }}</h4>
                                </div>
                                <div class="col-sm-2 col-md-2"></div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="input-group number-spinner">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" ng-click="removeItem(product._id)">
                                                <span class="glyphicon glyphicon-minus"></span>
                                            </button>
                                        </span>
                                        <label class="form-control text-center">{{ getItemQty(product._id) }}</label>
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" ng-click="addItem(product._id)">
                                                <span class="glyphicon glyphicon-plus"></span>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer" id="panelfooter">
            <h6>{{ product.productName }} </h6>
            <h6>$ {{ product.productPrice }} {{ product.productUnit }}</h6>
        </div>
        <div class="input-group number-spinner">
            <span class="input-group-btn">
                <button class="btn btn-default" ng-click="removeItem(product._id)">
                    <span class="glyphicon glyphicon-minus"></span>
                </button>
            </span>
            <label class="form-control text-center">{{ getItemQty(product._id) }}</label>
            <span class="input-group-btn">
                <button class="btn btn-default" ng-click="addItem(product._id)">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </span>
        </div>
    </div>
</div>

Answer 1

在那里查看ui-bootstrap和Modal的示例。您看到所有图片都被加载的原因是您已经内联了所有内容。您应该做的是将模态内容放在单独的模板中，并使用ng-click指令打开模式对话框。使用templateUrl选项将确保在单击时加载内容，而不是在

之前加载

避免在点击之前加载模态图像

1 个答案: